SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question include a tag into another one

    Hi,

    in my html page i have for example the following thing :

    ...

    <div class='test' id='id_test'>
    this is a simple test
    </div>

    Now when this html page is loaded, i would to have a js script which include this div into another one. In the way that for browser, it will look like that :

    <div class='prog_added_div'>
    <div class='test' id='id_test'>
    this is a simple test
    </div>
    </div>

    I do not understand how appendchild can insert such element on both side ?
    I mean before the beginning of the div ==> <div class='prog_added_div'> and after the previous div ==> </div>

    thx.

    M.

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html>
    <body>
    <div class='test' id='id_test'>
    	this is a simple test
    </div>
    
    <script>
    var test = document.getElementById("id_test");
    var wrapper = document.createElement("div");
    wrapper.id = "wrapper";
    
    wrapper.appendChild(test);
    document.body.appendChild(wrapper)
    </script>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works fine, but the DOM method would be to use setAttribute("id","wrapper"); instead of wrapper.id = "wrapper";
    It converts an attribute to a string. FireFox doesn't like unknown attributes, but seeings "id" isn't an unknown attribute it's perfectly fine.
    Mike - Side project: Live Journal (blogging site).

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, IE has issues getting and setting attributes, so if you wanna be safe in most cases, go with the wrapper.id syntax.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pepejeria,
    I added a message box to your code.
    alert(test.parentNode.innerHTML)
    But message box don't display the new div in old div.
    Message box displays <div class="test" id="id_test">this is a simple test</div>
    Code:
    <html>
    <body>
    <div class="test" id="id_test">
    	this is a simple test
    </div>
    
    <script type="text/javascript">
    var test = document.getElementById("id_test");
    var wrapper = document.createElement("div");
    wrapper.id = "wrapper";
    
    wrapper.appendChild(test);
    document.body.appendChild(wrapper)
    alert(test.parentNode.innerHTML); //  <div class="test" id="id_test">this is a simple test</div>
    
    </script>
    </body>
    </html>
    I wrote this code:
    Code:
    <html>
    <body>
    <div class="test" id="id_test">
    	this is a simple test
    </div>
    
    <script type="text/javascript">
    var oldDiv = document.getElementById("id_test");
    var newDiv = document.createElement('div');
    newDiv.id="my-new-div";
    // newDiv.setAttribute("id","my-new-div");
    oldDiv.appendChild(newDiv);
    document.body.appendChild(oldDiv);
    
    alert(oldDiv.innerHTML);
    
    </script>
    </body>
    </html>
    and added message box.
    alert(oldDiv.innerHTML);
    Message box displays:
    this is a sample test <div id="my-new-div"><div>


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
  •