Problems with document.createElement() in XHTML

[webEater]

Hello, I try the following in Firefox and other modern browsers:

window.addEventListener('load', function() {
document.title = CSS.getClass('fontSize');
var div = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(div);
alert(div);
alert(div.style)
}, true);

It works fine in normal HTML mode (Content-type: text/html), but in
XHTML mode it alerts "[object Element]" instead of "[object
HTMLDivElement]" and the second alert shows "undefined" instead of
"[object CSSStyleDeclaration]". So I can't reach the style declaration
which is important for me. Strict mode makes trouble again and again,
the biggest bug: document.write does not work:
http://www.intertwingly.net/blog/2006/11/10/Thats-Not-Write

Can somebody help me with my problem?

Andi

 

[webEater]

Hello, I try the following in Firefox and other modern browsers:

window.addEventListener('load', function() {
document.title = CSS.getClass('fontSize');
var div = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(div);
alert(div);
alert(div.style)
}, true);Your indentation is confusing. Please clean it up next time.


It works fine in normal HTML mode (Content-type: text/html), but in
XHTML mode it alerts "[object Element]" instead of "[object
HTMLDivElement]" and the second alert shows "undefined" instead of
"[object CSSStyleDeclaration]". So I can't reach the style declarationdiv doesn't have any style attribute; why should the second alert show

anything? It may have styles applied from a stylesheet, but that's not
the same as a style attribute. Also in strict XHTML mode you should
use node.getAttribute('style') rather than node.style. Remember you're
dealing with an XML document, not an HTML document. The XML DOM is
eversoslightly different than the HTML DOM and it might be worth
reviewing the differences.

the biggest bug: document.write does not work:Not a bug. Don't use document.write in strict mode.

If the additional challenges of strict mode are too difficult, may I
ask why you're using strict mode? Why not just use normal HTML mode,
if that's working for you?

-David

Hello David,

I am working on a framework that must work in every mode, html and xml.

the biggest bug: document.write does not work:Not a bug. Don't use document.write in strict mode.

This is very well-founded *laugh. I have written a workaround and use
it still And I call it a bug.

But to my problem, I have tested all possibilities to add a style
declaration to my divs:

window.addEventListener('load', function() {
document.title = CSS.getClass('fontSize');
var div = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(div);
alert(div);
// brute force
//div.style.backgroundColor = 'red';
div.getAttribute('style').backgroundColor = 'red';
div.getAttribute('style').setAttribute('backgroundColor', 'red');
div.getAttribute('style').setAttribute('background-color', 'red');
}, true);

None of them is working. I think there MUST be a way to add a style
declaration. It's the first time that I have this problem. The FireBug
error: div.getAttribute("style") has no properties

 

[Ari Krupnik]

Also in strict XHTML mode you should
use node.getAttribute('style') rather than node.style.

Could you explain why? I'm new here, trying to pick up good style :=)


Ari.

 

[webEater]

they don't have the JavaScript properties that you're used to in HTML
nodes. Most of the time however, when you're scripting in a browser,
you don't need to worry about treating your XHTML as a strict XML
document - even in strict mode, when you serve your document as
"Content-Type: text/html" you're actually going to get an HTML document
even with an XHTML doctype. However, when you override the
content-type (say, with a server directive or with a meta http-equiv
tag) and set it to text/xml, you're dealing with a different beast
altogether. Your node.id and node.style and most other built-in
javascript element properties disappear, document.getElementById
doesn't work like you expect it to (see:http://blog.bitflux.ch/wiki/GetElementById_Pitfalls), and several other
habits have to be changed. "style" becomes just another attribute of
your XML document, and you need to treat it like one.

But most of the time, you're using XHTML served as "Content-Type:
text/html" and don't need to worry about these issues.

-David

Thank you David for your help. So I think it's not worth to deal with
XML really. I think it's a little bit confusing to dispense with the id
attribute. So text/html is the choice.

window.addEventListener('load',
function() {
var b = document.getElementsByTagName('body')[0];
var d = document.createElement('div');
b.appendChild(d);
d.innerHTML = '<div id="yeah">Hello</div>';
alert(d.firstChild); // returns null, innerHTML doesn't work too
$('yeah').style.color = 'green';
},
true);

My experience is now that traditional HTML properties don't work with
dynamically created elements. Elements already existing in your
document still have all properties.

 

[webEater]

they don't have the JavaScript properties that you're used to in HTML
nodes. Most of the time however, when you're scripting in a browser,
you don't need to worry about treating your XHTML as a strict XML
document - even in strict mode, when you serve your document as
"Content-Type: text/html" you're actually going to get an HTML document
even with an XHTML doctype. However, when you override the
content-type (say, with a server directive or with a meta http-equiv
tag) and set it to text/xml, you're dealing with a different beast
altogether. Your node.id and node.style and most other built-in
javascript element properties disappear, document.getElementById
doesn't work like you expect it to (see:http://blog.bitflux.ch/wiki/GetElementById_Pitfalls), and several other
habits have to be changed. "style" becomes just another attribute of
your XML document, and you need to treat it like one.

But most of the time, you're using XHTML served as "Content-Type:
text/html" and don't need to worry about these issues.

-DavidThank you David for your help. So I think it's not worth to deal with

XML really. I think it's a little bit confusing to dispense with the id
attribute. So text/html is the choice.

window.addEventListener('load',
function() {
var b = document.getElementsByTagName('body')[0];
var d = document.createElement('div');
b.appendChild(d);
d.innerHTML = '<div id="yeah">Hello</div>';
alert(d.firstChild); // returns null, innerHTML doesn't work too
$('yeah').style.color = 'green';},true);

My experience is now that traditional HTML properties don't work with
dynamically created elements. Elements already existing in your
document still have all properties.

My cross-browser solution, includes IE 5.5+:

onload = function() {
var div = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(div);
var t = document.createTextNode('text');
div.appendChild(t);
div.setAttribute('style', 'color:green');
if (div.style.color == '')
try { div.style.color = 'green'; } catch(e) {}
alert(div.style.color);
};

 

[Richard Cornford]

Hello, I try the following in Firefox and other modern browsers:

window.addEventListener('load', function() {
document.title = CSS.getClass('fontSize');
var div = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(div);
alert(div);
alert(div.style)
}, true);

Your indentation is confusing. Please clean it up next time.

It works fine in normal HTML mode (Content-type: text/html), but in
XHTML mode it alerts "[object Element]" instead of "[object
HTMLDivElement]" and the second alert shows "undefined" instead of
"[object CSSStyleDeclaration]". So I can't reach the style
declaration

div doesn't have any style attribute;

DIV elements most certainly do have style attributes (both in HTML and
XHTML).

... . Also in strict XHTML mode you
should use node.getAttribute('style') rather
than node.style.

There is no reason for not using the - style - property of XHTML
elements, but if a method is to be used instead it should be the -
setAttributeNS - method that is used (XHTML attributes being namespace
qualified).

Remember you're dealing with an XML document, not an HTML
document.

It is an XHTML document, which may be XML but is not only that. XHTML
1.0 DOMs should be expected to implement at least most of the W3C HTML
DOM specification in addition to the Core DOM.

The XML DOM is eversoslightly different than the HTML DOM

This is "eversoslightly" in the sense of; so divergent that no
non-trivial HTML DOM script can be expected to work in an XHTML DOM and
the effort needed to create a script that will function in both is so
great that no (knowledgeable) script author would consider proposing the
use of (real) XHTML in a commercial context.

and it might be worth reviewing the differences.

Good advice, that if followed would enable you to avoid making false
statements about what should and should not exist in an XHTML DOM, and
what should and should not be done with one.

Not a bug. Don't use document.write in strict mode.

If the additional challenges of strict mode

Normally 'strict mode' is used to distinguish between browsers applying
correct rules in the interpretation of CSS and browsers applying
differing rules for reasons of back-compatibility. Here the distinction
is between scripting an HTML DOM and scripting an XHTML (though XHTML
DOMs can expect to have CSS rules applied strictly).

are too difficult, may I ask why you're using strict mode?
Why not just use normal HTML mode, if that's working for you?

Authoring and scripting HTML documents elusively is a sensible strategy
for dealing with the dual problems that no IE browser (including 7) is
capable of interpreting XHTML as XHTML (providing an XHTML DOM to be
scripted) and that the effort needed to attempt to create and maintain
scripts that will function with both types of DOM is disproportional, as
is creating and maintaining two separate scripts, one for each type of
DOM (and so neither can easily be commercially justified).

Richard.

 

[Richard Cornford]

Hello, I try the following in Firefox and other modern browsers:

window.addEventListener('load', function() {
document.title = CSS.getClass('fontSize');
var div = document.createElement('div');

In an XHTML document you should be suing the - createElementNS - method,
with a second argument supplying the namespace for XHTML.

document.getElementsByTagName('body')[0].appendChild(div);
alert(div);
alert(div.style)
}, true);

It works fine in normal HTML mode (Content-type: text/html),
but in XHTML mode it alerts "[object Element]" instead of
"[object HTMLDivElement]"

Seems reasonable as you did not tell the DOM which namespace (i.e.
XHTML) your 'div' element belongs to.

and the second alert shows "undefined" instead of
"[object CSSStyleDeclaration]".

<snip>

Well, as it is not an XHTML element you should not expect it to have
interfaces specific to particular types of element. DOM Core interfaces
are the most you can expect.

Richard.

 

[Richard Cornford]

It's because XML nodes are different from HTML nodes.

<snip>

While the object created here probably is just an XML node the object
that should have been created (with the - createElementNS - method)
should be expected to implement appropriate interfaces from the W3C HTML
DOM, including the - style - property. The W3C HTML DOM specification
explicitly applies to XHTML 1.0, and lists where XHTML DOMs will differ
from HTML DOMs.

But most of the time, you're using XHTML served as
"Content-Type: text/html" and don't need to worry about
these issues.

A document served as text/html is not XHTML in anything but appearance.
It will be interpreted as tag-soup HTML and all the XML-like features of
the mark-up will be error-corrected back to something that makes sense
in tag-soup HTML.

Richard.