DOM flaw 1

Luzian · Dec 14, 2006

In neither case does this page display correctly: the "hello world" is supposed to display after whatver is dynamically loaded in the div tag as it precedes the paragraph tag containing the "hello world" text.

I don't remember having this problem before with dhtml. How is it done correctly?

test.js

Code:

function test1()
{
	var display = document.getElementById("display");
	display.innerHTML = "This should display before 'hello world', but replaces it instead.";
}
function test2()
{
	var display = document.getElementById("display");
	var text_node = document.createTextNode("This should display before 'hello world', but appears AFTER it instead.");
	display.appendChild(text_node);
}

test.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
	<head>
		<title></title>
		<script type="text/javascript" src="test.js"></script>
	</head>
	<body>
		<div>
			<input type="button" onclick="test1();" value="click" />
			<input type="button" onclick="test2();" value="click" />
			<div id="display" />
			<p>hello world</p>
		</div>
	</body>
</html>

okiiyama · Dec 14, 2006

I think you are wrong on both.

1. before setting innerHTML, what is innerHTML equal to? If you set the value of innerHTML without keeping the original innerHTML string, it makes sense that you lose whatever it was between your div tags.

2.appendChild() works fine. Append means to add to the 'end' of something. So when you call appendChild(text_node) you should see the text_node after your <p>..</p>

cLFlaVA · Dec 14, 2006

you can't have a self-closing div tag - it's not valid.

try changing your html to this:

Code:

        <div>
            <input type="button" onclick="test1();" value="click" />
            <input type="button" onclick="test2();" value="click" />
            <div id="display">[red]</div>[/red]
            <p>hello world</p>
        </div>

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

cLFlaVA · Dec 14, 2006

sorry, i was wrong... i guess it's valid. but if you don't have a spot in between closing and opening tags, how will it know where to append the text node?

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

Luzian · Dec 14, 2006

1. before setting innerHTML, what is innerHTML equal to? If you set the value of innerHTML without keeping the original innerHTML string, it makes sense that you lose whatever it was between your div tags.

This has nothing to do with my question.

2.appendChild() works fine. Append means to add to the 'end' of something. So when you call appendChild(text_node) you should see the text_node after your <p>..</p>

Incorrect, appendChild appends a node to the end of the node whose using the appendNode method, which is clearly what I am trying to do.

you can't have a self-closing div tag - it's not valid.

Thanks cLFlaVA, this actually works, though I would say it's invalid. It is just not supported by firefox and possible IE. All elements should be able to be manipulated through DOM, closed or not. Try it in .net, it will work.

cLFlaVA · Dec 14, 2006

Try it in .net, it will work.

i work in client-side code -- what does .NET mean to me? nothing.

try what in .NET? you can't do client-side manipulation in .NET...

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

Foamcow · Dec 15, 2006

For what it's worth I didn't think it was valid to have an empty div but the W3C validator says otherwise.

I tested your code in FF2 and Safari on a Mac and they both behave the same way.

My interpretation is thus:
Firefox (and Safari) is 'guessing' and ignoring the / in the opening tag. It's then closing the div for you in a correctly nested fashion.

If you create the empty div like so:

Code:

<div id="display"></div>

Then your code works as expected.

I would say that this isn't a fault with the DOM per se but rather the browser interpretation of it and/or the W3C specs relating to closing empty elements.

It could be argued that you shouldn't have the empty element on the page at all and instead create it by manipulating the DOM. Though I understand that you are simply demonstrating what you perceive as a fault with Firefox (and Safari's) interpretation of the DOM.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

DOM flaw 1

Luzian

Programmer

okiiyama

IS-IT--Management

cLFlaVA

Programmer

cLFlaVA

Programmer

Luzian

Programmer

cLFlaVA

Programmer

Foamcow

Programmer

Similar threads

Part and Inventory Search

Sponsor