Assign and get IDs of multiple child elements of parent - Pure Javascript-VBForums
Results 1 to 2 of 2

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

  1. #1

    Thread Starter
    Addicted Member Peter Porter's Avatar
    Join Date
    Jul 2013
    Posts
    135

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

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

    I came across this problem when I wanted 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, <a> tags 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, links, 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.


    Code:
    <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:

    Code:
    <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>
    Last edited by Peter Porter; Jun 24th, 2017 at 03:21 PM.

  2. #2

    Thread Starter
    Addicted Member Peter Porter's Avatar
    Join Date
    Jul 2013
    Posts
    135

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

    Before (normal Feedburner feed):

    Name:  Feedburner.png
Views: 1115
Size:  28.5 KB



    After (applied Javascript to tweak feed):

    Name:  Feedburner2.png
Views: 1108
Size:  27.0 KB
    Last edited by Peter Porter; Jun 4th, 2017 at 04:57 PM.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.