xhtml, innerHtml, appendChild, and innerHTML. what is the exact proper way to do this with DOM

sonic

Ok,
i am sure everyone is sick of hearing about this. but i've checked
about 10 different posts/sites about this issue, and they all say "use
DOM" but i think there is more to be said. Perhaps I am a total newbie
but the answer was not immediately obvious to me here.
so.. problem:
declaring doctype as xhtml will prevent myDiv.innerHtml=val from
working.

suggested solution:
use DOM.
var myNewDiv = document.createElement( 'div' );
myDiv.appendChild( myNewDiv );
now we have to set that new div's value somehow right? of course
myNewDiv.innerHtml will not work. so using DOM puts us in the same
exact spot. unless i went about this the wrong way.. i realize that
using dom to appen a input text will work because .value property will
be set no problem, but how do we set just a text value?

and how come
myDiv.innerHTML = val // all caps HTML
still works?

Jul 10 '06 #1

Subscribe Reply

2974

Randy Webb

sonic said the following on 7/10/2006 2:09 PM:

Ok,
i am sure everyone is sick of hearing about this. but i've checked
about 10 different posts/sites about this issue, and they all say "use
DOM" but i think there is more to be said. Perhaps I am a total newbie
but the answer was not immediately obvious to me here.
so.. problem:
declaring doctype as xhtml will prevent myDiv.innerHtml=val from
working.

Only in browsers that support xHTML (IE doesn't).

suggested solution:
use DOM.
var myNewDiv = document.createElement( 'div' );
myDiv.appendChild( myNewDiv );

Give your div an ID:

myDiv.id="test";

now we have to set that new div's value somehow right? of course
myNewDiv.innerHtml will not work. so using DOM puts us in the same
exact spot.

var el = document.getElementById("test");
//remove all childNodes
while (el.firstChild) {
el.removeChild(el.firstChild);
}
//insert new Text
el.appendChild(document.createTextNode(theTextToAd d));
}

unless i went about this the wrong way.. i realize that
using dom to appen a input text will work because .value property will
be set no problem, but how do we set just a text value?

See above.

and how come
myDiv.innerHTML = val // all caps HTML
still works?

In which browser?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Jul 10 '06 #2

sonic

thanks for quick response Randy.
1. the ID was not the issue. I already had a reference to my control. I
just didn't know about the document.createTextNode method. thank you
for that.

2. innerHTML works for me in firefox 1.5.0.4 and MSIE
6.0.2900.2180.xpsp_sp2_gdr.......
my doc declaration is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Randy Webb wrote:

sonic said the following on 7/10/2006 2:09 PM:
Ok,
i am sure everyone is sick of hearing about this. but i've checked
about 10 different posts/sites about this issue, and they all say "use
DOM" but i think there is more to be said. Perhaps I am a total newbie
but the answer was not immediately obvious to me here.
so.. problem:
declaring doctype as xhtml will prevent myDiv.innerHtml=val from
working.

Only in browsers that support xHTML (IE doesn't).

suggested solution:
use DOM.
var myNewDiv = document.createElement( 'div' );
myDiv.appendChild( myNewDiv );

Give your div an ID:

myDiv.id="test";

now we have to set that new div's value somehow right? of course
myNewDiv.innerHtml will not work. so using DOM puts us in the same
exact spot.

var el = document.getElementById("test");
//remove all childNodes
while (el.firstChild) {
el.removeChild(el.firstChild);
}
//insert new Text
el.appendChild(document.createTextNode(theTextToAd d));
}

unless i went about this the wrong way.. i realize that
using dom to appen a input text will work because .value property will
be set no problem, but how do we set just a text value?

See above.

and how come
myDiv.innerHTML = val // all caps HTML
still works?

In which browser?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Jul 10 '06 #3

RobG

sonic wrote:

thanks for quick response Randy.

What response? Why is top-posting becoming common here? Please
interleave replies with trimmed quotes from whatever you are replying
to. Now the conversation is completely out of sequence...

[...]

Randy Webb wrote:
sonic said the following on 7/10/2006 2:09 PM:
Ok,
i am sure everyone is sick of hearing about this. but i've checked
about 10 different posts/sites about this issue, and they all say "use
DOM" but i think there is more to be said. Perhaps I am a total newbie
but the answer was not immediately obvious to me here.
so.. problem:
declaring doctype as xhtml will prevent myDiv.innerHtml=val from
working.

It will fail using that capitalisation (perhaps you've not copied
actual code), but otherwise, why should it fail just because you are
using XHTML[1]? There is no public specification to say where, when or
how innerHTML should work, so test it widely before use.

The general idea is that innerHTML should only be used for simple
things - it is really handy to completely replace the content of an
element with a bit of text with minimal markup. It is also common to
use it with AJAX where large chunks of documents are returned for
insertion into a document, but I that doesn't make it good.

There are some big differences in implementations between browsers,
there is no published standard for it and it isn't (and likely never
will be) part of a W3C standard.

Only in browsers that support xHTML (IE doesn't).

Even using XHTML strict, Firefox allows the use of innerHTML without
complaint. I'd expect it to fail with XML, not XHTML. Afterall, XHTML
(1.0) is just HTML written as XML. 1.1 is somewhat different, but even
then innerHTML still works in Firefox (and IE).

[...]

and how come
myDiv.innerHTML = val // all caps HTML
still works?
In which browser?

IE and Firefox 1.5.
1. Whether it is 'better' to use XHTML rather than HTML has been argued
long and hard in many forums. The concensus is that unless you have a
really good reason to use XHTML and understand the ramifications, stick
with HTML. Otherwise, there are some significant down-sides and no
positives to XHTML.

--
Rob

Jul 11 '06 #4

Richard Cornford

sonic wrote:
<snip>

2. innerHTML works for me in firefox 1.5.0.4 and MSIE
6.0.2900.2180.xpsp_sp2_gdr.......

As IE does not support XHTML at all the odds are that you are actually
employing (more or less) formally malformed HTML (resulting in the
receiving browser creating an HTML DOM to be scripted) and so it is not
surprising that innerHTML works.

my doc declaration is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

An XHTML DOCTYPE does not make a document into an XHTML document (even
if it could not be an XHTML document without one). For web browser the
critical factor is the HTTP content type header. If you serve a document
as text/html then it is interpreted as a (tag soup) HTML document. Any
resemblance that document may have to XHTML is irrelevant to the browser
(beyond forcing the browser to do a lot of extra work error-correcting
it back to (tag soup) HTML), though it may fool the author.

However, if you are going to script a document as an HTML document it is
perverse to mark it up as if it was not an HTML document.

Randy Webb wrote:

<snip>

Please do not top post to comp.lang.javascript.

Richard.

Jul 11 '06 #5

Randy Webb

RobG said the following on 7/10/2006 10:45 PM:

<snip>

>>Only in browsers that support xHTML (IE doesn't).

Even using XHTML strict, Firefox allows the use of innerHTML without
complaint. I'd expect it to fail with XML, not XHTML. Afterall, XHTML
(1.0) is just HTML written as XML. 1.1 is somewhat different, but even
then innerHTML still works in Firefox (and IE).

Not in IE. IE doesn't support xHTML so it can't possibly support
innerHTML in xHTML. And it is even debatable whether FF is getting true
xHTML from the OP.

[...]

>>>and how come
myDiv.innerHTML = val // all caps HTML
still works?
In which browser?

IE and Firefox 1.5.

Firefox, yes. IE, no. See above.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Jul 11 '06 #6

Tony

RobG wrote:

sonic wrote:

>>thanks for quick response Randy.

What response? Why is top-posting becoming common here?

Google Groups.

Consider the Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
--
"The most convoluted explanation that fits all of the made-up facts is
the most likely to be believed by conspiracy theorists. Fitting the
actual facts is optional."

Jul 11 '06 #7

Similar topics

innerHTML / Appendchild question

by: Nicolas Van Lancker | last post by:

Hi folks; I have this webpage, allowing users to insert multiple records in one post into the database. Because I don't know the exact number of records they want to add, I created a little...