document.body.appendChild doesn't work

**Barto** · 04-25-2009, 07:10 AM

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

**jscheuer1** · 04-25-2009, 12:06 PM

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>

**molendijk** · 04-25-2009, 08:18 PM

Originally Posted by jscheuer1

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.

**jscheuer1** · 04-25-2009, 09:57 PM

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.

**molendijk** · 04-26-2009, 12:36 PM

Originally Posted by jscheuer1

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.

**jscheuer1** · 04-26-2009, 01:32 PM

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.

**molendijk** · 04-27-2009, 01:35 AM

Originally Posted by jscheuer1

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.

Thread: document.body.appendChild doesn't work

Thread Tools

Search Thread

document.body.appendChild doesn't work

Bookmarks

Bookmarks

Posting Permissions