innerHTML

[Gene Wirchenko]

Dear JavaScripters:

The FAQ states:
9.4 How do I modify the content of the current page?
Using the non-standard but widely implemented innerHTML property...

Is it still the case that it is non-standard? Is there an
alternative that is standard?

Sincerely,

Gene Wirchenko

 

[Gregor Kofler]

Am 2011-12-23 11:09, Christian Kirsch meinte:
innerHTML is widely supported, but no standard yet. Particularly with
(older) IE browsers innerHTML has its fair share of issues.

The usual DOM methods are standard (createElement, addChildElement etc.)

^^^^^^^^^^^^^^^

Erm... I suppose you meant node.appendChild() and its sibling methods.

Gregor

 

[Dr J R Stockton]

In comp.lang.javascript message <36r7f719terpj6d2guc8v2hicvnmsgilvc@4ax.

The FAQ states:
9.4 How do I modify the content of the current page?
Using the non-standard but widely implemented innerHTML property...

Is it still the case that it is non-standard? Is there an
alternative that is standard?

If you only want to change plain ordinary text to plain ordinary text,
you can expect no problem, at least in current GUI browsers.

In my <http://www.merlyn.demon.co.uk/holidays.htm> - is it right for
Canada? - the tables (when on the same page) are written with innerHTML,
disguised in function Wryt.


IIRC, problems come if one tries to rebuild the structure of a Table.


The theoretically-favoured way is to use the properties of elements to
alter the DOM tree. For an example, see
<http://www.merlyn.demon.co.uk/inc-prop.js>, which provides two
functions, one of which creates a moderately complex first Form, which
may be seen first in <http://www.merlyn.demon.co.uk/js-props.htm>.

You may now wonder what those properties are -- press the Enter button
on the Form, double-click 'body', Enter, double-click 'children', etc.
BUT, after double-clicking a number, just under the
Enter, replace, for example, x.y.z.7 with x.y.z[7] until I do
something about it. TOO LATE, I just did.

 

[Arno Welzel]

Gene Wirchenko, 2011-12-23 03:55:

Dear JavaScripters:

The FAQ states:
9.4 How do I modify the content of the current page?
Using the non-standard but widely implemented innerHTML property...

Is it still the case that it is non-standard? Is there an
alternative that is standard?

With HTML5 innerHTML will become a standard.

See also:

<http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0>
<http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1>

Anyway - the problem remains, that you may end up with an invalid
document when you insert invalid markup using innerHTML and the browser
has to parse the given markup with every change of the innerHTML property.

For more complex stuff you should use the DOM methods. This will be
faster and you can not create invalid documents accidentally.

 

[Bwig Zomberi]

innerHTML is widely supported, but no standard yet. Particularly with
(older) IE browsers innerHTML has its fair share of issues.

textContent

 

[Hans-Georg Michna]

Gregor Kofler wrote:

textContent

That is not supported by Internet Explorer, at least not up to
version 8, maybe not even 9.

So if you want to support these browsers, like every
conscientious web programmer would do, you cannot use
textContent or you have to fall back on a contraption around
innerHTML for IE. The contraption depends on circumstances. See
http://winhlp.com/node/610#toade for some hints.

Hans-Georg

 

[J.R.]

That is not supported by Internet Explorer, at least not up to
version 8, maybe not even 9.

textContent property (DOM Level 3) is now supported by IE9. See
<http://msdn.microsoft.com/en-us/library/ff974773(v=vs.85).aspx>

IE prior to version 9 supports innerText.

So if you want to support these browsers, like every
conscientious web programmer would do, you cannot use
textContent or you have to fall back on a contraption around
innerHTML for IE. The contraption depends on circumstances. See
http://winhlp.com/node/610#toade for some hints.

Difference between innerText and textContent:
see <https://developer.mozilla.org/En/DOM/Node.textContent>
* innerText -> implemented in IE prior to version 9.
* textContent -> DOM Level 3 - IE9, FF, Safari, etc.
* Google Chrome seems to implement both innerText and textContent.