SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    appending div contents?

    Hi,

    Say i have this very simple html:

    Code HTML4Strict:
    <div id="inner">
    <img src="caro.jpg" />
    <img src="caro1.jpg" />
    <img src="caro.jpg" />
    <img src="caro1.jpg" />
    <img src="caro.jpg" />
    <img src="caro1.jpg" />
    <img src="caro.jpg" />
    <img src="caro1.jpg" />
    <img src="caro.jpg" />
    <img src="caro1.jpg" />
    <img src="caro.jpg" />
    <img src="caro1.jpg" />
    <img src="caro.jpg" />
    <img src="caro1.jpg" />
    <img src="caro.jpg" />
    </div>

    ....at a certain point i want to grab all the inner img's, copy them
    and append them to the end of the ones that are already there...so i've made a start:

    Code JavaScript:
    count = 0;
    var inner = document.getElementById('inner');
     var yes = inner.childNodes;
     
      for (var i = 0; i < yes.length; ++ i) {
     
       if(yes[i].nodeType == 1) {
           ++count
    }
    }
    alert(count);
    }

    so this gives me a count of 15...for some reason without checking the nodetype i got 31...there
    is a textnode in there somewhere...that i'm assuming is whitespace?

    Now i'e tried doing this:

    Code JavaScript:
    if(yes[i].nodeType == 1) {
     
       inner.appendChild(yes[i]);

    but it doesn't work...nothing happens....no img tags are added....i've checked using firebug also.

    What do i need to do to get the img tags appended???

    Thanks

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino View Post
    but it doesn't work...nothing happens....no img tags are added....i've checked using firebug also.
    You're removing elements then replacing them at the end of the div, so it looks like nothing's happening.
    If you want to copy elements you must use cloneNode().
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    No i'm not replacing elements anywhere.....cloneNode would seem to be the way to go but the script above with this added causes my browser to crash:

    if(yes[i].nodeType == 1) {

    var monkey = yes[i].cloneNode(false);
    inner.appendChild(monkey);

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino View Post
    Hi,

    No i'm not replacing elements anywhere
    That was the result - if you append an existing node, you remove it from its previous position.
    .....cloneNode would seem to be the way to go but the script above with this added causes my browser to crash:

    if(yes[i].nodeType == 1) {

    var monkey = yes[i].cloneNode(false);
    inner.appendChild(monkey);
    Tested:
    Code:
    <body>
    <div id="inner">
     <img src="image1.gif" /> 
     <img src="image2.gif" />
     <img src="image3.gif" />
     <img src="image4.gif" />
    </div>
    <script type='text/javascript'>
    
    var theDiv=document.getElementById('inner'), nodes=theDiv.childNodes,  len=nodes.length;
    
    for( var i=0; i<len; i++ )
     if( nodes[i].nodeType==1 )
      theDiv.appendChild( nodes[i].cloneNode( false ) );
    
    </script>
    </body>
    Tab-indentation is a crime against humanity.


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
  •