Results 1 to 2 of 2

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

  1. #1

    Thread Starter
    Fanatic Member Peter Porter's Avatar
    Join Date
    Jul 2013
    Posts
    532

    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 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.


    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; Sep 16th, 2018 at 03:53 AM.

  2. #2

    Thread Starter
    Fanatic Member Peter Porter's Avatar
    Join Date
    Jul 2013
    Posts
    532

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

    Before (normal Feedburner feed):

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



    After (applied Javascript to tweak feed):

    Name:  Feedburner2.png
Views: 4123
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
  •  



Click Here to Expand Forum to Full Width