Assign and get IDs of multiple child elements of parent - Pure Javascript

[Peter Porter]

I'm sure a few people have come across this problem in HTML... needing to tweak auto generated ID-less child elements within a parent.

I came across this problem when I needed to tweak a Feedburner RSS feed for a music video blog, rearranging artist names with song titles of a list of links on it's sidebar. The Feedburner script's autogenerated HTML doesn't give child elements tags <a> IDs. Only the parent element that contained these links had an ID.

Knowing the parent's element's ID “headline” that contained the child elements after viewing the live Feedburner source code, I slapped together the below javascript to assign and get IDs of child elements to tweak the feed.

<script>
// Add parent element's ID to string:
var parent = document.querySelectorAll("span.headline");  

// Find all child elements of parent:
for(var i=0; i<parent.length; i++){

// Assign IDs to all child elements of parent:
    parent[i].firstChild.id = "c"+i;


// Add your tweaks below this line:

  
}
</script>

Below is the complete script I use for the music video blog, with tweaks:

<script>
<!--
//          Feedburner Tweaker v1.0
// created: 28 January 2017
//  author: Peter Porter
//
-->

// Add parent element's ID to string:
var parent = document.querySelectorAll("span.headline");  

// Find all child elements of parent:
for(var i=0; i<parent.length; i++){

// Assign IDs to all child elements:
    parent[i].firstChild.id = "c"+i;

// Add child element’s url to string:
var url = document.getElementById("c"+i).href;  

// 1st tweak, alter url string, replacing http with https:
url = url.replace("http://", "https://");

// Apply 1st tweak to child element:		
document.getElementById("c"+i).href = url;  

// Add child element to string while splitting it’s
// RSS feed’s post’s titles by it’s minus sign:
var str = document.getElementById('c'+i).innerHTML.split(' - ');

// 2nd tweak, in new string, rearrange post’s text, 
// enlarging song title and changing it’s color,
// bumping artist’s name to next line:
var str2 = "<div style='color:rgb(255, 182, 145);font-size:120%'>" + str[1] + "</div>" + str[0]

// Apply 2nd tweak to child element:
document.getElementById("c"+i).innerHTML = str2;

// 3rd tweak, apply margins, separate links by dotted border:
document.getElementById("c"+i).outerHTML+="<div style='margin: 2% 0% 2% 0%;border-bottom:dotted 2px #ffffff;'></div>"  
  }

</script>

[Peter Porter]

Before (normal Feedburner feed):





After (applied Javascript to tweak feed):