SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question getting all childNodes

    Hi,

    this should be simple but I cannot figure it out. This is the HTML:
    HTML Code:
    <div id="box">
      <p>one</p>
      <p>two <strong>three</strong></p>
      ...
    </div>
    The JavaScript function has to take everything inside <div id="box"> and put it into another div. It should become:
    HTML Code:
    <div id="box">
      <div class="content">
        <p>one</p>
        <p>two <strong>three</strong></p>
        ...
      </div>
    </div>
    So how can I get all childNodes recursively to enclose them with another element?

    oerdec

  2. #2
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have to get recursively all children because a reference to a node contains all childNodes of that node.

    Try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <script type="text/javascript">
      function addDiv(idDiv){
        divRef=document.getElementById(idDiv);
    
        //create new div
        newDiv=document.createElement('div');
        newDiv.className='content';
    
        //append childNodes to new div
        while(divRef.firstChild){
              newDiv.appendChild(divRef.firstChild);
        }
    
        //append the newDiv
        divRef.appendChild(newDiv);
      }
    </script>
    </head>
    <body>
    <div id="box">
      <p>one</p>
      <p>two <strong>three</strong></p>
    </div>
    <form action="#">
    <input type="button" onclick="addDiv('box')" />
    </form>
    </body>
    </html>

  3. #3
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks ada80ro, it helped me a lot.

    I needed it to realise rounded corners and drop shadows


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
  •