Results 1 to 7 of 7

Thread: document.body.appendChild doesn't work

  1. #1
    Join Date
    Apr 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default document.body.appendChild doesn't work

    You may think this is silly, but i cannot show a simple div in IE7:
    var divg = document.createElement("div");
    divg.appendChild(document.createTextNode("New DIV"));
    document.body.appendChild(divg);
    I've tried all, if you have just a small script that works in IE, it can be really helpful. Just to see how to append it to document.
    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Your code works here in IE 7. Perhaps you were trying to execute it before the browser had parsed the body (before onload). If so, there would technically be no body to append to.

    Working demo:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    onload = function(){
    var divg = document.createElement("div");
    divg.appendChild(document.createTextNode("New DIV"));
    document.body.appendChild(divg);
    };
    </script>
    </head>
    <body>
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,840
    Thanks
    49
    Thanked 247 Times in 239 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by jscheuer1 View Post
    Perhaps you were trying to execute it before the browser had parsed the body (before onload). If so, there would technically be no body to append to.
    So my guess was that the 'onload' will not be needed if we replace 'document.body' with 'document.documentElement'. The following script works indeed in non-IE:
    Code:
    <script type="text/javascript">
    var divg = document.createElement("div");
    divg.appendChild(document.createTextNode("New DIV"));
    document.documentElement.appendChild(divg);
    </script>
    Sadly enough, IE cannot handle this. But this works in IE and non-IE:
    Code:
    Some doctype...
    <html>
    <head>
    <li style="list-style: none"></li>
    <script type="text/javascript">
    var divg = document.createElement("div");
    divg.appendChild(document.createTextNode("New DIV"));
    document.getElementsByTagName('li')[0].appendChild(divg);
    </script>
    </head>
    <body>Content
    </body>
    </html>
    'li' might be the only tag name with which this works. I tried a couple of other tag names; they didn't allow it. Strange.
    ===
    Arie.
    Last edited by molendijk; 04-25-2009 at 09:40 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Actually, if the element exists (has been opened and closed as parsed by the browser) it should work, and will in most browsers. However, IE often also requires that all parent nodes have been opened and closed as parsed by the browser.

    The bottom line though, the onload event of of the page should be allowed to fire before you attempt to manipulate the DOM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,840
    Thanks
    49
    Thanked 247 Times in 239 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by jscheuer1 View Post
    The bottom line though, the onload event of of the page should be allowed to fire before you attempt to manipulate the DOM.
    Compare this:
    Code:
    <head>
    </head>
    
    <body>
    <li style="list-style: none"></li>
    <script type="text/javascript">
    var divg = document.createElement("div");
    divg.appendChild(document.createTextNode("CHILD APPENDED"));
    document.getElementsByTagName('li')[0].appendChild(divg);
    </script>
    
    <script type="text/javascript">
       // create a unique image source so that this page works with continued testing
       var src = "http://www.nasa.gov/images/content/84857main_EC04-0325-23_lg.jpg?" + Number(new Date);
       document.write("<img src=" + src + " height=240 width=300>");
      </script>
    </body>
    to this:
    Code:
    <head>
    </head>
    
    <body>
    <script type="text/javascript">
    onload = function(){
    var divg = document.createElement("div");
    divg.appendChild(document.createTextNode("CHILD APPENDED"));
    document.body.appendChild(divg);
    };
    </script>
    
    <script type="text/javascript">
       // create a unique image source so that this page works with continued testing
       var src = "http://www.nasa.gov/images/content/84857main_EC04-0325-23_lg.jpg?" + Number(new Date);
       document.write("<img src=" + src + " height=240 width=300>");
      </script>
    </body>
    ===
    Arie.
    Last edited by molendijk; 04-26-2009 at 12:51 PM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not sure what that proves. That li is invalid. This worked in IE and Firefox:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <script type="text/javascript">
    (function(){
    var divg = document.createElement("div");
    divg.appendChild(document.createTextNode("CHILD APPENDED"));
    document.body.appendChild(divg);
    })();
    </script>
    <script type="text/javascript">
       // create a unique image source so that this page works with continued testing
       var src = "http://www.nasa.gov/images/content/84857main_EC04-0325-23_lg.jpg?" + Number(new Date);
       document.write("<img src=" + src + " height=240 width=300>");
      </script>
    </body>
    </html>
    But if the DOM script is in the head, both give an error unless onload is used. If you need to have the insertion point before the image, onload may be used, combined with the insertBefore() method. Or you can have an existing element, such as your li (but a valid one please) as the target for appending.

    However, even with the DOM script in the body, IE (7 and less) will have problems appending to some elements. I know for a fact that this is true when the element being appended to is in a table which hasn't closed yet, even if the element itself is closed. That's why it's safest to wait until after the onload event has fired.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,840
    Thanks
    49
    Thanked 247 Times in 239 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by jscheuer1 View Post
    I'm not sure what that proves. That li is invalid.
    I wanted to show that a child can be appended before the document has completely loaded (hence the slowly loading image). I was too hasty. I should have put a correct li in the body:
    Code:
    <ul><li style="list-style: none">&nbsp;</li></ul>
    But your code does exactly what I wanted to show. I didn't know you can do it like that.
    ===
    Arie.

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
  •