SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2001
    Location
    DC
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DOM appendChild question

    OK, I have an HTML document that contains a simple paragraph like the one below . . .
    HTML Code:
     <p> this sentance is broken here <br> by a br tag </p>
    As you can see, the paragraph contains 3 child nodes (i.e., a text node, an element node, and another text node). I want to take the 3 nodes and put them inside an anchor tag via the DOM. So I end up with . . .
    HTML Code:
       <p> <a href=#>this sentance is broken here <br> by a br tag </a>  </p>
    Below I have the full html doc and javascript that I thought would produce this but it doesn't. It actually produces the following by placing the <br> tag in front of the anchor tag!
    HTML Code:
            <p><br><a href=#>this sentance is broken here by a br tag </a> </p>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
           <html>
           <head>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
           
           
           
           <title>Untitled Document
           </head>
           
           <body>
           
           
           
           <p id="test">this sentance is broken here 
            by a br
           
           
           
           
           <script language="javascript">
           var targetEl = document.getElementById("test");
           var newA = document.createElement("a");
           newA.setAttribute("href", "#");
           for (var m = 0; m < targetEl.childNodes.length; m++)
           {
             newA.appendChild(targetEl.childNodes[m]);
           }
           targetEl.appendChild(newA);
           </script>
           
           </body>
           </html>
    I don't get it. I called the appendChild() of the new anchor but only the text nodes were added as children. The br element node has become a sibling to the anchor tag instead of a child of the anchor tag.

    How can I do this through the DOM? Why does the appendChild() work fine for the text nodes but not the element node?
    signature

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because the child nodes that are appended to newA are removed from their previous parent (targetEl). A node can only have one parent.

    The first iteration of the loop removes child 0 (the first text node) from the paragraph and moves it into the anchor. That makes the BR element the first child node of the paragraph. But then you increment the loop variable and move child 1 (the second child, which is now the second text node) into the anchor. In the third loop iteration you're trying to access child 2 (third child) in a paragraph that now has only one child (the BR element).

    Do it this way, instead:
    Code:
    var targetEl = document.getElementById("test");
    var newA = document.createElement("a");
    newA.setAttribute("href", "#");
    while (targetEl.hasChildNodes()) {
        newA.appendChild(targetEl.firstChild);
    }
    targetEl.appendChild(newA);
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2001
    Location
    DC
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Brilliant!!!

    You explained that very well so thanks for the edification!
    signature


Bookmarks

Posting Permissions

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