innerHTML text node whitespace question

[martymix]

simple question:
I have a simple <dt>test text</dt>

I get the innerHTML of that dt, and I try and append some text to it
like so:

dt = document.getElementsByTagName('dt')[0]
var text = dt.innerHTML + 'new'

in Firefox, I get "test textnew"
and in IE I get "test text new" (with a space)

If I have any Element Nodes within that dt or wrap that dt text node
with a <span>, IE and firefox will append without a space. Obviously
IE is adding whitespace to the text node where Firefox is not (and not
doing that behavior when an Element Node exists. I have looked around
and have not seen any comments on this issue. Am I missing something?

 

[VK]

simple question:
I have a simple <dt>test text</dt>

I get the innerHTML of that dt, and I try and append some text to it
like so:

dt = document.getElementsByTagName('dt')[0]
var text = dt.innerHTML + 'new'

in Firefox, I get "test textnew"
and in IE I get "test text new" (with a space)

If I have any Element Nodes within that dt or wrap that dt text node
with a <span>, IE and firefox will append without a space. Obviously
IE is adding whitespace to the text node where Firefox is not (and not
doing that behavior when an Element Node exists. I have looked around
and have not seen any comments on this issue. Am I missing something?

What is the exact HTML source, can you post here?

 

[martymix]

simple question:
I have a simple <dt>test text</dt>

I get the innerHTML of that dt, and I try and append some text to it
like so:

dt = document.getElementsByTagName('dt')[0]
var text = dt.innerHTML + 'new'

in Firefox, I get "test textnew"
and in IE I get "test text new" (with a space)

If I have any Element Nodes within that dt or wrap that dt text node
with a <span>, IE and firefox will append without a space. Obviously
IE is adding whitespace to the text node where Firefox is not (and not
doing that behavior when an Element Node exists. I have looked around
and have not seen any comments on this issue. Am I missing something?

What is the exact HTML source, can you post here?

dumbed down for the example..

<dt class="header" id="invest">Investment Professionals</dt>
<dd class="header">
<p>This is the venture partners copy</p>
</dd>
</dt>

and the JS

var dt = document.getElementById('invest');
var text = dt.innerHTML + 'new'
alert(text); // FF = 'Investment Professionalsnew' IE='Investment
Professionals new'

And I was wrong, wrapping 'investment professionals' in a <span>
yields the same space. Wrapping in a <p> collapses it. Must be an
inline thing.

 

[RobG]

simple question:
I have a simple <dt>test text</dt>

I get the innerHTML of that dt, and I try and append some text to it
like so:

dt = document.getElementsByTagName('dt')[0]
var text = dt.innerHTML + 'new'

in Firefox, I get "test textnew"
and in IE I get "test text new" (with a space)

The unsatisfying answer is that innerHTML is a proprietary Microsoft
invention that has been widely copied by other browsers and there is
no public standard for its implementation. A small amount of testing
in different browsers will show there are a number of differences
across browsers.

Opera, which usually follows IE pretty closely, does the same as
Firefox in this case.

innerHTML is usually OK for inserting HTML, however it starts to fall
apart if you depend upon it for anything else, particularly if you
expect it to be the same as the HTML source.

 

[-Lost]

simple question:
I have a simple <dt>test text</dt>

I get the innerHTML of that dt, and I try and append some text to it
like so:

dt = document.getElementsByTagName('dt')[0]
var text = dt.innerHTML + 'new'

in Firefox, I get "test textnew"
and in IE I get "test text new" (with a space)

The unsatisfying answer is that innerHTML is a proprietary Microsoft
invention that has been widely copied by other browsers and there is
no public standard for its implementation. A small amount of testing
in different browsers will show there are a number of differences
across browsers.

Opera, which usually follows IE pretty closely, does the same as
Firefox in this case.

innerHTML is usually OK for inserting HTML, however it starts to fall
apart if you depend upon it for anything else, particularly if you
expect it to be the same as the HTML source.

What alternatives are there if you desire the source to be the same?

In fact, when is it not appropriate to use innerHTML? Any example of
when the DOM is the best choice?

I hope I worded that right.

 

[-Lost]

simple question:
I have a simple <dt>test text</dt>

I get the innerHTML of that dt, and I try and append some text to it
like so:

dt = document.getElementsByTagName('dt')[0]
var text = dt.innerHTML + 'new'

in Firefox, I get "test textnew"
and in IE I get "test text new" (with a space)

The unsatisfying answer is that innerHTML is a proprietary Microsoft
invention that has been widely copied by other browsers and there is
no public standard for its implementation. A small amount of testing
in different browsers will show there are a number of differences
across browsers.

Opera, which usually follows IE pretty closely, does the same as
Firefox in this case.

innerHTML is usually OK for inserting HTML, however it starts to fall
apart if you depend upon it for anything else, particularly if you
expect it to be the same as the HTML source.

What alternatives are there if you desire the source to be the same?

In fact, when is it not appropriate to use innerHTML? Any example of
when the DOM is the best choice?

I hope I worded that right.

OK, I am not liking how I worded all that. Sorry.

What alternatives, aside from createElement, createTextNode,
setAttribute, and appendChild are there?

None?

And in the DOM fashion your source will be exactly as you created it?

The reason I ask actually is because of the code below.

<p id="p1" onclick="json1['widget']['window'].winFunc1(this.onclick);">
alert json bracket</p>

<p id="p2" onclick="json1.widget.window.winFunc1(this.onclick);">
alert json dot</p>

The winFunc1 function simply alerts what is passed. In both cases you get:

function onclick(event) {
json1.widget.window.winFunc1(this.onclick);
}

Is it possible to actually get:
function onclick(event) {
json1['widget']['window'].winFunc1(this.onclick);
}

? It is pointless and all, I am just wondering.

(Yes, I am lazy (and slightly inebriated). I figured it would be much
easier me asking than actually writing a test.) Thanks!

 

[RobG]

simple question:
I have a simple <dt>test text</dt>
I get the innerHTML of that dt, and I try and append some text to it
like so:
dt = document.getElementsByTagName('dt')[0]
var text = dt.innerHTML + 'new'
in Firefox, I get "test textnew"
and in IE I get "test text new" (with a space)
The unsatisfying answer is that innerHTML is a proprietary Microsoft
invention that has been widely copied by other browsers and there is
no public standard for its implementation. A small amount of testing
in different browsers will show there are a number of differences
across browsers.
Opera, which usually follows IE pretty closely, does the same as
Firefox in this case.
innerHTML is usually OK for inserting HTML, however it starts to fall
apart if you depend upon it for anything else, particularly if you
expect it to be the same as the HTML source.

What alternatives are there if you desire the source to be the same?

I don't know of any reliable, cross-browser way to ensure that an
element's innerHTML is the same as its source in anything other than
trivial cases. There is certainly no way to ensure that any two
browsers will report the same value for the innerHTML property of a
non-trival element.

Modifying a table or a complex structure, modifying attribute values,
there are likely many more.

OK, I am not liking how I worded all that. Sorry.

What alternatives, aside from createElement, createTextNode,
setAttribute, and appendChild are there?

None?

There are a variety of standard and non-standard ways to modify the
DOM, e.g. new Option, that are widely supported and "better" than
innerHTML in certain circumstances. My opinion is that innerHTML
should be reserved for simple cases, such as where text content is to
be replaced.

And in the DOM fashion your source will be exactly as you created it?

Browsers read the source and parse it to create a DOM. According to
MSDN, the innerHTML property:

"Sets or retrieves the HTML between the start and end tags of the
object."
<URL: http://msdn2.microsoft.com/en-us/library/ms533897.aspx >

The phrase "the HTML" seems to indicate that getting an element's
innerHTML property returns the browser's reverse engineering of a DOM
fragment back to HTML. It is not the literal source that created it,
otherwise they would have said "the source HTML" or such (though given
the generally dreadful quality of MSDN documentation I'm not too sure
about that).

Unless you set out to write the source to be the same as the innerHTML
property, you can almost guarantee that the two will be different to
varying degrees and that any two browsers will also vary in their
innerHTML property.

The reason I ask actually is because of the code below.

<p id="p1" onclick="json1['widget']['window'].winFunc1(this.onclick);">
alert json bracket</p>

<p id="p2" onclick="json1.widget.window.winFunc1(this.onclick);">
alert json dot</p>

The winFunc1 function simply alerts what is passed. In both cases you get:

function onclick(event) {
json1.widget.window.winFunc1(this.onclick);

}

It isn't "what is passed", otherwise it would be the literal source.

Is it possible to actually get:
function onclick(event) {
json1['widget']['window'].winFunc1(this.onclick);

}

In some browser, maybe - in all browsers, no as your above example
(presuming it is a real example) demonstrates.

? It is pointless and all, I am just wondering.

Yes, pointless.

(Yes, I am lazy (and slightly inebriated). I figured it would be much
easier me asking than actually writing a test.) Thanks!

You did write an example and found the innerHTML is different to the
source. What more needs to be said?

 

[Elegie]

-Lost wrote:

What alternatives, aside from createElement, createTextNode,
setAttribute, and appendChild are there?

JFTR, some range methods also permit to parse some HTML string into some
DOM fragment; in IE, you can use pasteHTML, and Mozilla extends the W3C
Range specification with a specific createContextualFragment method.
Since these methods are both proprietary, I would not expect other
browsers to implement them, though.

<URL:http://msdn2.microsoft.com/en-us/library/ms536656.aspx>
<URL:http://developer.mozilla.org/en/docs/DOM:range.createContextualFragment>


Regards,
Elegie 'Never out of range'

 

[-Lost]

RobG wrote:
simple question:
I have a simple <dt>test text</dt>
I get the innerHTML of that dt, and I try and append some text to it
like so:
dt = document.getElementsByTagName('dt')[0]
var text = dt.innerHTML + 'new'
in Firefox, I get "test textnew"
and in IE I get "test text new" (with a space)
The unsatisfying answer is that innerHTML is a proprietary Microsoft
invention that has been widely copied by other browsers and there is
no public standard for its implementation. A small amount of testing
in different browsers will show there are a number of differences
across browsers.
Opera, which usually follows IE pretty closely, does the same as
Firefox in this case.
innerHTML is usually OK for inserting HTML, however it starts to fall
apart if you depend upon it for anything else, particularly if you
expect it to be the same as the HTML source.
What alternatives are there if you desire the source to be the same?

I don't know of any reliable, cross-browser way to ensure that an
element's innerHTML is the same as its source in anything other than
trivial cases. There is certainly no way to ensure that any two
browsers will report the same value for the innerHTML property of a
non-trival element.

Modifying a table or a complex structure, modifying attribute values,
there are likely many more.

OK, I am not liking how I worded all that. Sorry.

What alternatives, aside from createElement, createTextNode,
setAttribute, and appendChild are there?

None?

There are a variety of standard and non-standard ways to modify the
DOM, e.g. new Option, that are widely supported and "better" than
innerHTML in certain circumstances. My opinion is that innerHTML
should be reserved for simple cases, such as where text content is to
be replaced.

And in the DOM fashion your source will be exactly as you created it?

Browsers read the source and parse it to create a DOM. According to
MSDN, the innerHTML property:

"Sets or retrieves the HTML between the start and end tags of the
object."
<URL: http://msdn2.microsoft.com/en-us/library/ms533897.aspx >

The phrase "the HTML" seems to indicate that getting an element's
innerHTML property returns the browser's reverse engineering of a DOM
fragment back to HTML. It is not the literal source that created it,
otherwise they would have said "the source HTML" or such (though given
the generally dreadful quality of MSDN documentation I'm not too sure
about that).

Unless you set out to write the source to be the same as the innerHTML
property, you can almost guarantee that the two will be different to
varying degrees and that any two browsers will also vary in their
innerHTML property.

The reason I ask actually is because of the code below.

<p id="p1" onclick="json1['widget']['window'].winFunc1(this.onclick);">
alert json bracket</p>

<p id="p2" onclick="json1.widget.window.winFunc1(this.onclick);">
alert json dot</p>

The winFunc1 function simply alerts what is passed. In both cases you get:

function onclick(event) {
json1.widget.window.winFunc1(this.onclick);

}

It isn't "what is passed", otherwise it would be the literal source.

Right, good point.

Is it possible to actually get:
function onclick(event) {
json1['widget']['window'].winFunc1(this.onclick);

}

In some browser, maybe - in all browsers, no as your above example
(presuming it is a real example) demonstrates.

? It is pointless and all, I am just wondering.

Yes, pointless.

(Yes, I am lazy (and slightly inebriated). I figured it would be much
easier me asking than actually writing a test.) Thanks!

You did write an example and found the innerHTML is different to the
source. What more needs to be said?

Fair enough.

Sometimes my mind and my understanding forget to share information with
each other.

Thanks, RobG!

 

[-Lost]

-Lost wrote:



JFTR, some range methods also permit to parse some HTML string into some
DOM fragment; in IE, you can use pasteHTML, and Mozilla extends the W3C
Range specification with a specific createContextualFragment method.
Since these methods are both proprietary, I would not expect other
browsers to implement them, though.

<URL:http://msdn2.microsoft.com/en-us/library/ms536656.aspx>
<URL:http://developer.mozilla.org/en/docs/DOM:range.createContextualFragment>

Thanks for the additional information.