PDA

View Full Version : document.body.appendChild doesn't work



Barto
04-25-2009, 08: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, 01: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:


<!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, 09:18 PM
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:

<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:

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, 10: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, 01:36 PM
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:
<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:

<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, 02:32 PM
I'm not sure what that proves. That li is invalid. This worked in IE and Firefox:


<!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, 02:35 AM
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:

<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.