trouble adding elements via DOM

[yawnmoth]

I'm having some difficulty with adding elements to a webpage via the
DOM. The following works:

main.htm:
<script>
js = document.createElement('script');
js.src='test.js';
document.getElementsByTagName('head')[0].appendChild(js);
</script>

test.js:
alert('hello, world!');

But this doesn't:

main.htm:
<script>
img = document.createElement('img');
img.src='image.jpg';
document.getElementsByTagName('body')[0].appendChild(img);
</script>

This got me thinking that maybe webbrowsers don't auto-create bodies
for websites whereas they do heads. To test this, I tried to write a
script that'd list all that was created by the browser:

main.htm:
<script>
nodes = document.childNodes;
for (i=0;i<nodes.length;i++)
{
document.write(nodes.nodeTypedValue+'<br />');
}
</script>
Unfortunately, this script just prints out undefined. I tried switched
nodeTypedValue out with node TypeString to no avail.

I then decided to try and modify the second main.htm. I tried making
it look for elements with the tag name of 'head' instead of 'body', but
that didn't help. I tried adding a newly creating body element (whose
bgcolor was black) but that didn't work, either. I even tried adding a
title tag via appendChild to 'head' (whose text was specified by a
createTextNode) but that didn't do anything, either.

So... why can I add javascript files via the method in the first
main.htm when I can't add anything else?

Also, why doesn't the second main.htm work?

 

[Martin Honnen]

yawnmoth wrote:

But this doesn't:

main.htm:
<script>
img = document.createElement('img');
img.src='image.jpg';
document.getElementsByTagName('body')[0].appendChild(img);
</script>

How about writing valid HTML 4 first and then manipulate the DOM, making
sure that there is a body element before you try to insert any element
into it.
Or do you have a requirement to write minimal HTML snippets and hope the
browser adds the missing structure?

 

[Randy Webb]

yawnmoth said the following on 3/15/2006 1:04 PM:

I'm having some difficulty with adding elements to a webpage via the
DOM. The following works:

main.htm:
<script>
js = document.createElement('script');
js.src='test.js';
document.getElementsByTagName('head')[0].appendChild(js);
</script>

test.js:
alert('hello, world!');

But this doesn't:

main.htm:
<script>
img = document.createElement('img');
img.src='image.jpg';
document.getElementsByTagName('body')[0].appendChild(img);
</script>

This got me thinking that maybe webbrowsers don't auto-create bodies
for websites whereas they do heads. To test this, I tried to write a
script that'd list all that was created by the browser:

No, they auto-create whatever container they need. In both cases, it
creates the HEAD element because you left it out and it needed it to
place the script element in. Use a properly validated HTML file and both
of your scripts work as long as the second is in a function or in the
body element.

To see the body get created auto, in your second example, add some HTML:

<p>content</p>
<script code here>

And it will work.

What you *should* have gotten from the second example was an error message:
IE:
document.getElementsByTagName(...).0 is null or not an object
Firefox:
Error: document.getElementsByTagName("body")[0] has no properties

So... why can I add javascript files via the method in the first
main.htm when I can't add anything else?

Also, why doesn't the second main.htm work?

See Above. But it's because you are not using valid HTML and expecting
valid results.

 

[yawnmoth]

yawnmoth said the following on 3/15/2006 1:04 PM:
<snip>
No, they auto-create whatever container they need. In both cases, it
creates the HEAD element because you left it out and it needed it to
place the script element in.

Well then, what other elements does it auto-create? The script I wrote
didn't tell me, so what will?

You also suggest that the second main.htm didn't work because there
wasn't any valid HTML. I don't understand that - even in scripts with
valid HTML, new elements can be added via the DOM that don't,
explicitly, have any HTML, themselves. Why are these accessable while
they aren't in the second main.htm that I posted?

 

[RobG]

Well then, what other elements does it auto-create? The script I wrote
didn't tell me, so what will?

The HTML specification is a start. There are lots of optional *tags* where
the element is mandatory, e.g. html, head and body tags. Also tbody tags
in a table.

If you omit the tags, then you leave it up to the browser to insert the
elements where it sees fit, which may not be where you expect them to occur.

You also suggest that the second main.htm didn't work because there
wasn't any valid HTML. I don't understand that - even in scripts with
valid HTML, new elements can be added via the DOM that don't,
explicitly, have any HTML, themselves. Why are these accessable while
they aren't in the second main.htm that I posted?

I would guess that the browser thinks your script element is in the head
and creates one. Adding a script element to the head therefore 'works'.
When you try to access the body element, it hasn't created one yet so it
barfs (hint - check out the title element).

 

[Randy Webb]

yawnmoth said the following on 3/15/2006 3:09 PM:

Well then, what other elements does it auto-create? The script I wrote
didn't tell me, so what will?

Did you test my suggestion with the <p>content</p>?
When your image script is prefixed with the <p>content</p> then the
browser creates the body element because you didn't and content only
goes in the body - so - it creates one.

Test it.

<script>
img = document.createElement('img');
img.src='image.jpg';
document.getElementsByTagName('body')[0].appendChild(img);
</script>

Gives the two errors - in two different browsers - that I gave you.
Simply put some content ahead of it:

<p>Some Content</p>
<script>
img = document.createElement('img');
img.src='image.jpg';
document.getElementsByTagName('body')[0].appendChild(img);
</script>

Now, your script creates the image and loads it (At least in IE6 and
Firefox) and without errors.

You also suggest that the second main.htm didn't work because there
wasn't any valid HTML.

Not that there "wasn't any valid HTML" but that using a valid HTML
document would have cured the error.

I don't understand that - even in scripts with
valid HTML, new elements can be added via the DOM that don't,
explicitly, have any HTML, themselves. Why are these accessable while
they aren't in the second main.htm that I posted?

Because you are confusing the HTML DOM with what's in the script block.