FAQ Topic - How do I modify the content of the current page? (2010-04-14)

[FAQ server]

-----------------------------------------------------------------------
FAQ Topic - How do I modify the content of the current
page?
-----------------------------------------------------------------------

Using the non-standard but widely implemented ` innerHTML ` property:
` <div id="anID">Some Content</div> ` with script:

document.getElementById("anID").innerHTML =
"Some <em>new</em> Content";

Where ` "anID" ` is the (unique on the HTML page)
` id ` attribute value of the element to modify.

If the new content is only text and does not need to replace existing HTML,
it is more efficient to modify the ` data ` property of a text node.

document.getElementById("anID").firstChild.data = "Some new Text";

Compatibility Note: Implementations have been known to split long text
content among several adjacent text nodes, so replacing the data of the
first text node may not replace all the element's text. The ` normalize `
method, where supported, will combine adjacent text nodes.

Note: Make sure the element exists in the document (has been parsed) before trying to
reference it.

http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-FF21A306

http://msdn.microsoft.com/en-us/library/cc304097(VS.85).aspx

http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

http://developer.mozilla.org/en/Whitespace_in_the_DOM

http://developer.mozilla.org/en/docs/DOM:element.innerHTML

http://jibbering.com/faq/faq_notes/alt_dynwrite.html


The complete comp.lang.javascript FAQ is at
http://jibbering.com/faq/

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]

, Tue, 13 Apr 2010 23:00:03, FAQ server <[email protected]> posted:
-----------------------------------------------------------------------
FAQ Topic - How do I modify the content of the current
page?
-----------------------------------------------------------------------

Using the non-standard but widely implemented ` innerHTML ` property:
` <div id="anID">Some Content</div> ` with script:

document.getElementById("anID").innerHTML =
"Some <em>new</em> Content";

Where ` "anID" ` is the (unique on the HTML page)
` id ` attribute value of the element to modify.

I think that it should be said explicitly that (almost?) any element can
be given an ID; that any element can have an innerHTML property altered
or created; and that almost(?) any element normally displays its
innerHTML property - after adjusting to be accurate. Otherwise, it is
not obvious how widely that, and the DOM version, can be used.

 

[Garrett Smith]

In comp.lang.javascript message <[email protected]


I think that it should be said explicitly that (almost?) any element can
be given an ID; that any element can have an innerHTML property altered
or created; and that almost(?) any element normally displays its
innerHTML property - after adjusting to be accurate. Otherwise, it is
not obvious how widely that, and the DOM version, can be used.

Not all elements cannot have innerHTML. For example, what would
innerHTML mean for IMG, BR, HR?

As with any host object, one must read the pertinent specification and
documentation of the target implementation(s).

The documentation for MSIE states:

| The property is read/write for all objects except the following, for
| which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE,
| TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

<http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx>

And so the answer to the problem if unknown implementation is that the
onus is on the developer to familiarize himself with the specifications
(where applicable), the documentation of the pertinent implementations
(where available), and, last but not least, he must test.

Something to that effect is needed for entry "What is a host object".

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
september.org>, Thu, 15 Apr 2010 14:33:33, Garrett Smith

Not all elements cannot have innerHTML. For example, what would
innerHTML mean for IMG, BR, HR?

An innerHTML property can be assigned to a <br> element. I just did it.
The property does not display (expected); but it can after assignment be
read, even if the result is unexpected.

But you show no sign of having perceived the point, which is that, while
the innerHTML example uses only <div>, other text-containers can be
used. A typical FAQ reader may well not realise that.

And remember : the standard only days what one ought to be able to do.
Test shows what one can do.

 

[Garrett Smith]

In comp.lang.javascript message <[email protected]
september.org>, Thu, 15 Apr 2010 14:33:33, Garrett Smith


An innerHTML property can be assigned to a <br> element. I just did it.
The property does not display (expected); but it can after assignment be
read, even if the result is unexpected.

But you show no sign of having perceived the point, which is that, while
the innerHTML example uses only <div>, other text-containers can be
used. A typical FAQ reader may well not realise that.

MSDN and DevMo documentation are linked.
<http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx>
<http://developer.mozilla.org/en/docs/DOM:element.innerHTML>

Is more documentation on innerHTML desirable? We have HTML5 draft
standard; which is a w3c WD.

There is, surprisingly, Safari documentation. Unsurprisingly, it is as
bad as can be expected and the URL should be fixed before being linked
from anywhere. Who remembers such long URL:
<http://developer.apple.com/Mac/libr...TMLElement_idl/Classes/HTMLElement/index.html>

?? JFC.

And remember : the standard only days what one ought to be able to do.
Test shows what one can do.

The closest thing to a standard for innerHTML is whatwg draft standard
HTML5 and that defines innerHTML differently than it works in IE.

The whatwg pages have a javascript popup that causes the page to load
very slowly and locks up the browser. This puts the document in
persepective with contrast to the author's web programming skills. OTOH,
the slowness is intolerable. Linking to w3c.
<http://dev.w3.org/html5/spec/Overview.html#innerhtml>

- and even with that, we see yet another example of a javascript error:

| fixBrokenLink is not defined
| [Break on this error] fixBrokenLink();
| Overview.html (line 281)

How about "fixBrokenSpec?"

Regarding your comment "tests show what one can do," I suggest that one
does not, by trial and error, figure out what "works". Chances are, the
result is going to be nonstandard, possibly a bug that will be fixed, or
will exhibit adverse side effects (and then have developers scrambling
in the next release of the browser, adding X-UA-Compatible and updating
their browser sniffer scripts).

A good solution is standard, simple, and works as specified,
consistently across a wide set of implementations.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
september.org>, Sat, 17 Apr 2010 23:07:29, Garrett Smith

Regarding your comment "tests show what one can do," I suggest that one
does not, by trial and error, figure out what "works".

Observation shows that to be the commonest method.

Chances are, the result is going to be nonstandard, possibly a bug
that will be fixed, or will exhibit adverse side effects (and then have
developers scrambling in the next release of the browser, adding X-UA-
Compatible and updating their browser sniffer scripts).

A good solution is standard, simple, and works as specified,
consistently across a wide set of implementations.

No : A good solution is simple and works as expected, consistently
across a wide set of implementations; and does not conflict with
applicable standards.

The standards process is slow, and browsers are frequently updated; a
feature may become safe to use well before it can be found in a formal
standard.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]

, Tue, 13 Apr 2010 23:00:03, FAQ server <[email protected]> posted:
---
FAQ Topic - How do I modify the content of the current
page?
---

Using the non-standard but widely implemented ` innerHTML ` property:
` <div id="anID">Some Content</div> ` with script:

document.getElementById("anID").innerHTML =
"Some <em>new</em> Content";

ISTM that, where the element is a PRE, and the assigned string contains
whitespace, then for IE8 each block of whitespace is treated as a single
space, and for other browsers the whitespace is happily preserved.

That may be worth mentioning.

If the new content is only text and does not need to replace existing HTML,
it is more efficient to modify the ` data ` property of a text node.

document.getElementById("anID").firstChild.data = "Some new Text";

Using that preserves the whitespace, but does not treat a A_J
as HTML - which in this case is worse. Code is at
<URL:http://www.merlyn.demon.co.uk/js-randm.htm#GP>, subsection "New
Test", function ResolD. The function contains Wryt which uses
innerHTML.



Function ResolD is new, superseding ResolA ResolB ResolC. On the
reasonable assumption that the only stuck bits are trailing zeroes, it
determines the number of significant bits in the value of Math.random()
as a function of the position of the leading "1" bit when the value is
represented in fixed-point binary.

MS IE 8 1 53, 2 54, 3 54, 4 54, 5 54, 6 54, ...
Firefox 3.0.19 1 53, 2 53, 3 53, 4 53, 5 53, 6 53, ...
Opera 10.10 1 53, 2 53, 3 53, 4 53, 5 53, 6 53, ...
Safari 4.0.5 1 30, 2 30, 3 30, 4 30, 5 30, 6 30, ...
Chrome 4.1 1 30, 2 30, 3 30, 4 30, 5 30, 6 30, ...

 

[Garrett Smith]

In comp.lang.javascript message <[email protected]

ISTM that, where the element is a PRE, and the assigned string contains
whitespace, then for IE8 each block of whitespace is treated as a single
space, and for other browsers the whitespace is happily preserved.

That may be worth mentioning.

There are other deviations between implementations and discrenpencies
with the Draft Standard HTML 5.

<http://www.whatwg.org/specs/web-apps/current-work/multipage/apis-in-html-documents.html#innerhtml>

Says there document.innerHTML is available but it is not available in
the latest of Opera or Firefox.

HTML 5 also specifies behavior that diverges greatly from what any
version of Internet Explorer does.

Using that preserves the whitespace, but does not treat a A_J
as HTML - which in this case is worse. Code is at
<URL:http://www.merlyn.demon.co.uk/js-randm.htm#GP>, subsection "New
Test", function ResolD. The function contains Wryt which uses
innerHTML.

The paragraph in the FAQ begins with "If the new content is only text."
The specification is linked as well.

Function ResolD is new, superseding ResolA ResolB ResolC. On the
reasonable assumption that the only stuck bits are trailing zeroes, it
determines the number of significant bits in the value of Math.random()
as a function of the position of the leading "1" bit when the value is
represented in fixed-point binary.

MS IE 8 1 53, 2 54, 3 54, 4 54, 5 54, 6 54, ...
Firefox 3.0.19 1 53, 2 53, 3 53, 4 53, 5 53, 6 53, ...
Opera 10.10 1 53, 2 53, 3 53, 4 53, 5 53, 6 53, ...
Safari 4.0.5 1 30, 2 30, 3 30, 4 30, 5 30, 6 30, ...
Chrome 4.1 1 30, 2 30, 3 30, 4 30, 5 30, 6 30, ...

OK, but what's that got to do with this FAQ Entry?

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
september.org>, Thu, 22 Apr 2010 17:12:47, Garrett Smith

There are other deviations between implementations and discrenpencies
with the Draft Standard HTML 5.

<http://www.whatwg.org/specs/web-apps/current-work/multipage/apis-in-
html-documents.html#innerhtml>

Says there document.innerHTML is available but it is not available in
the latest of Opera or Firefox.

It is present in the latest ordinary releases of those; I don't use
betas & suchlike.

Removal would be a mistake.

HTML 5 also specifies behavior that diverges greatly from what any
version of Internet Explorer does.

The FAQ should concern itself predominantly with what browsers actually
do, not with what a possible future standard might say.

The paragraph in the FAQ begins with "If the new content is only text."
The specification is linked as well.

Yes, but not helpful. Remember that thread topics expand. There is a
clear difference in behaviour here between IE & the rest, and I was
hoping to be offered a convenient workround.

If innerHTML does go, the FAQ will need to offer a compatible
replacement for
element.innerHTML = StringOfHTML ;
..firstChild.data is inadequate.

OK, but what's that got to do with this FAQ Entry?

The page was cited, and the new result form might be of interest or
amusing.

Lasse, do you still have an Opera with the range bug discussed here in
2003?

 

[Garrett Smith]

In comp.lang.javascript message <[email protected]
september.org>, Thu, 22 Apr 2010 17:12:47, Garrett Smith

In comp.lang.javascript message <[email protected]
, Tue, 13 Apr 2010 23:00:03, FAQ server <[email protected]>
posted:

[...]
There are other deviations between implementations and discrenpencies
with the Draft Standard HTML 5.

<http://www.whatwg.org/specs/web-apps/current-work/multipage/apis-in-
html-documents.html#innerhtml>

Says there document.innerHTML is available but it is not available in
the latest of Opera or Firefox.

It is present in the latest ordinary releases of those; I don't use
betas & suchlike.

Removal would be a mistake.

Removal would only be possible if it had been added in the first place.

Are you sure you tried document.innerHTML? Try it again, with copy'n'paste:

javascript: alert(document.innerHTML);

The FAQ should concern itself predominantly with what browsers actually
do, not with what a possible future standard might say.

What browsers do totally varies. What IE does for innerHTML can be
unexpected and unintuitive.

You may say "innerHTML works," but can you explain precisely what
actually happens when setting or getting innerHTML? Sounds easy until
you actually sit down and try to do some in depth analysis, replete with
edge cases, across multiple browsers and versions.

It has been a while since I have looked very closely at the issue, but
from recollection, attributes may appear in IE out of order, unquoted,
and represented as properties.

HTML 5 is trying to codify existing behavior here. Of course it can't
get it totally right, that is why the proposal for a new property made
sense (to me, at least).

HTML 5 sort of codifies what happens in other browsers, because IE,
although the creator of this property, is a minority with its cases of
unintuitive, badly designed, seemingly wrong behavior.

[...]

Yes, but not helpful. Remember that thread topics expand. There is a
clear difference in behaviour here between IE & the rest, and I was
hoping to be offered a convenient workround.

Can you mention the problem that you think should be addressed here? Is
it whitespace? What are you getting at?

If innerHTML does go, the FAQ will need to offer a compatible
replacement for
element.innerHTML = StringOfHTML ;
.firstChild.data is inadequate.

innerHTML isn't going to go away - don't worry about that!

I mentioned document.innerHTML. On *document*, as in document.innerHTML.

[...]

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
september.org>, Sun, 25 Apr 2010 00:22:44, Garrett Smith

Can you mention the problem that you think should be addressed here? Is
it whitespace? What are you getting at?

I did. Using MS IE, go to
<URL:http://www.merlyn.demon.co.uk/js-randm.htm#GP>, then down a bit to
heading "New Test - Test Resolution", then on to a blue form. Set the
window to the design width, such that the code box occupies the full
width (more or less) press the "1" button, and observe the wider yellow
box in the form showing ONE line of text overflowing to the right.
After a while, press the "0" button in the form.

Now repeat exactly with a reputable browser; note that whitespace is now
rendered as one would evidently wish.

You have seen the first few numbers in that box before.

That box is called "Hits"; read the code above backwards, and you will
soon see how the string S which is written to it by innerHTML in Wryt is
composed to represent array AD neatly.

In Chrome and Safari, the second wide yellow box may receive contents
within an hour or so; in IE, Firefox, Opera, it will take around a
millennium.



ASIDE : via revised sig below, one can reach a version of MiniTrue which
works properly in Windows XP in interactive mode, which is good.

 

[Garrett Smith]

In comp.lang.javascript message <[email protected]
september.org>, Sun, 25 Apr 2010 00:22:44, Garrett Smith



I did. Using MS IE, go to
<URL:http://www.merlyn.demon.co.uk/js-randm.htm#GP>, then down a bit to
heading "New Test - Test Resolution", then on to a blue form. Set the
window to the design width, such that the code box occupies the full
width (more or less) press the "1" button, and observe the wider yellow
box in the form showing ONE line of text overflowing to the right.
After a while, press the "0" button in the form.

I am unfamiliar with the term "design width". What is that?

http://www.google.com/search?hl=en&...ne:"design+width"&aq=f&aqi=&aql=&oq=&gs_rfai=

Says:

| The width specification that a sidewalk or trail was intended to meet,
| usually set by building codes or agency guidelines.

Can't be that.

Now repeat exactly with a reputable browser; note that whitespace is now
rendered as one would evidently wish.

Can provide a short summary, followed by a brief description and an
example. Tell us what you thought the expected outcome should be and
then show what really happened, and in which browsers and versions.

I have no idea what you are expecting

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
september.org>, Mon, 26 Apr 2010 20:37:27, Garrett Smith

I am unfamiliar with the term "design width". What is that?

Just as its natural meaning in the Queen's English. The "such that"
above tells you how to do it even if the meaning eludes you. If you
happen to have a window 5000 px wide with default font set to 4 pt, then
the problem will probably not appear even in IE. If you have a window
640 px wide with default font 36 pt, the desired appearance will not
appear even in non-IE. My page design is on the whole flexible; but
degrades if bent too brutally.

http://www.google.com/search?hl=en&client=firefox-
a&hs=Bsw&rls=org.mozilla%3Aen-US%3Aofficial&ie=UTF-8&oe=UTF-8&q=define%
3A%22design+width%22&aq=f&aqi=&aql=&oq=&gs_rfai=

Says:

| The width specification that a sidewalk or trail was intended to meet,
| usually set by building codes or agency guidelines.

Can't be that.

Not *exactly* that, but essentially similar.

Can provide a short summary, followed by a brief description and an
example. Tell us what you thought the expected outcome should be and
then show what really happened, and in which browsers and versions.

I have no idea what you are expecting

You were told that in the article which introduced the matter to this
thread, "Date: 22 April 2010 14:24:45".

 

[Garrett Smith]

In comp.lang.javascript message <[email protected]
september.org>, Mon, 26 Apr 2010 20:37:27, Garrett Smith
[...]

I am unfamiliar with the term "design width". What is that?

[about Queen's English, etc]

[...]

You were told that in the article which introduced the matter to this
thread, "Date: 22 April 2010 14:24:45".

I see a thread from you on that date under the same thread. I don't know
about your local time zone, or if what you wrote is local time.

Sorry, I don't see the problem. Looks like that thread points back to
your Reso1D function which I replied with: "Ok but what's that got to do
with this entry?"

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith

Dr J R Stockton wrote: [GS:]

You were told that in the article which introduced the matter to
this
thread, "Date: 22 April 2010 14:24:45".

I see a thread from you on that date under the same thread. I don't
know about your local time zone, or if what you wrote is local time.

The chances of my writing two different articles in one thread and
committing them at times differing, to the second, by the difference
between your local time and mine is negligible.

Sorry, I don't see the problem. Looks like that thread points back to
your Reso1D function which I replied with: "Ok but what's that got to
do with this entry?"

ResolD only demonstrates how using ID.firstChild.data = "Some new Text";
is in this application worse although acting as it ought to act.

The message of 14:24:45 began :

<QUOTE>

In comp.lang.javascript message <[email protected]

, Tue, 13 Apr 2010 23:00:03, FAQ server <[email protected]> posted:
---
FAQ Topic - How do I modify the content of the current
page?
---

Using the non-standard but widely implemented ` innerHTML ` property:
` <div id="anID">Some Content</div> ` with script:

document.getElementById("anID").innerHTML =
"Some <em>new</em> Content";

ISTM that, where the element is a PRE, and the assigned string contains
whitespace, then for IE8 each block of whitespace is treated as a single
space, and for other browsers the whitespace is happily preserved.

That may be worth mentioning.

</QUOTE>

for which there is now demonstration code

AAA
<pre id="xxx"></pre>
BBB

<script>
xx = document.getElementById("xxx")
xx.innerHTML = "123 456 789 0\nzyz"
</script>

temporarily in <URL:http://www.merlyn.demon.co.uk/$1.htm>. Test in IE8
(bad) and in rival browsers.

IE8 :
AAA
123 456 789 0 zyz
BBB

AOB :
AAA
123 456 789 0
zyz
BBB



- -
Opera 10.52 10.53 fix time offset but not date concatenation.

 

[Garrett Smith]

In comp.lang.javascript message <[email protected]
september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith

Dr J R Stockton wrote: [GS:]

[...]

ISTM that, where the element is a PRE, and the assigned string contains
whitespace, then for IE8 each block of whitespace is treated as a single
space, and for other browsers the whitespace is happily preserved.

That may be worth mentioning.

IE has never handled whitespace properly with innerHTML, and it is not
just for PRE that matters. If the element is a DIV, the whitespace
should also be preserved so that when it is changed to, say, have
`div.style.whiteSpace = "pre"`, that the white space is then displayed
as expected.

It is worth mentioning. Linking to the innerHTML section for HTML 5
working draft sounds also worthwhile, if mentioned as a draft.

I'll provide a proposal later.

Thanks for reposting.

 

[Garrett Smith]

In comp.lang.javascript message <[email protected]
september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith

[...]

I'll provide a proposal later.

| How do I modify the content of the current page?
|
| Using the non-standard but widely implemented `innerHTML` property:
| <div id="anID">Some Content</div> with script:
|
| document.getElementById("anID").innerHTML =
| "Some <em>new</em> Content";
|
| Where "anID" is the (unique on the HTML page) id attribute value of
| the element to modify.
|
| All versions of Internet Explorer exhibit problems with `innerHTML`,
| including:
|
| * Fails with FRAMESET, HEAD, HTML, STYLE, SELECT, OBJECT, and all
| TABLE-related elements.
| * Replaces consecutive whitespace characters with a single space.
| * Changes attribute values and order of appearance.
| * Removes quotations around attribute values.
|
| If the new content is only text and does not need to replace existing
| HTML, it is more efficient to modify the data property of a text node.
|
| document.getElementById("anID").firstChild.data = "Some new Text";
|
| Compatibility Note: Implementations have been known to split long text
| content among several adjacent text nodes, so replacing the data of
| the
| first text node may not replace all the element's text. The normalize
| method, where supported, will combine adjacent text nodes.
|
| Note: Make sure the element exists in the document (has been parsed)
| before trying to reference it.
|
| * http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-FF21A306
| * http://msdn.microsoft.com/en-us/library/cc304097(VS.85).aspx
| * http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
| * http://developer.mozilla.org/en/Whitespace_in_the_DOM
| * http://developer.mozilla.org/en/docs/DOM:element.innerHTML
| * Draft Standard:
|
http://www.whatwg.org/specs/web-app...nd.html#html-fragment-serialization-algorithm

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
september.org>, Tue, 4 May 2010 21:55:34, Garrett Smith

In comp.lang.javascript message <[email protected]
september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith
<[email protected]> posted:
Dr J R Stockton wrote:

[...]

I'll provide a proposal later.

| How do I modify the content of the current page?
|
| Using the non-standard but widely implemented `innerHTML` property:
| <div id="anID">Some Content</div> with script:
|
| document.getElementById("anID").innerHTML =
| "Some <em>new</em> Content";
|
| Where "anID" is the (unique on the HTML page) id attribute value of
| the element to modify.

It would be better to have an earlier FAQ section on the various ways of
obtaining a reference to an element, and to put instead of that

reference.innerHTML = "Some <em>new</em> Content";

Commonly, though, an ID is used. The above code should not be used
multiple times, but should be made a function :

function Wryt(ID, S) { document.getElementById(ID).innerHTML = S }

 

[David Mark]

In comp.lang.javascript message <[email protected]
september.org>, Tue, 4 May 2010 21:55:34, Garrett Smith

Dr J R Stockton wrote:
In comp.lang.javascript message <[email protected]
september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith
<[email protected]> posted:
Dr J R Stockton wrote: [...]

I'll provide a proposal later.

| How do I modify the content of the current page?
|
| Using the non-standard but widely implemented `innerHTML` property:
| <div id="anID">Some Content</div> with script:
|
| document.getElementById("anID").innerHTML =
| "Some <em>new</em> Content";
|
| Where "anID" is the (unique on the HTML page) id attribute value of
| the element to modify.

It would be better to have an earlier FAQ section on the various ways of
obtaining a reference to an element, and to put instead of that

reference.innerHTML = "Some <em>new</em> Content";

Commonly, though, an ID is used. The above code should not be used
multiple times, but should be made a function :

function Wryt(ID, S) { document.getElementById(ID).innerHTML = S }

I fail to see how that should be a rule. In fact, it is often a bad
idea to exit an execution context amid multiple DOM updates as it
triggers costly (and sometimes ugly) re-flows.

Context, context, context. There are very few absolute rules in this
business. This underscores the need to avoid scripts by authors who
think that theirs is the only "right" way (e.g. Resig's ridiculous
stance that CSS height/width is "better" than the values contained in
height/width attributes) as they paint you into corners.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
september.org>, Thu, 6 May 2010 22:29:11, David Mark

I fail to see how that should be a rule. In fact, it is often a bad
idea to exit an execution context amid multiple DOM updates as it
triggers costly (and sometimes ugly) re-flows.

Kindle explain how replacing something like

document.getElementById("A").innerHTML = S1
....
document.getElementById("B").innerHTML = S2
....
document.getElementBy1d("C").innerHTML = S3
....
document.getElementById("D").innerHTML = S4
....
document.getElementById("E").innerHTML = S5

with something like

Wryt("A", S1)
....
Wryt("B", S2)
....
Wryt("C", S3)
....
Wryt("D", S4)
....
Wryt("E", S5)

add reflow costs. It aids clarity, and reduces the chance of the sort
of typo that may not have been noticed above.

If, as must often be the case, S1 replaces text of the same length,
there will be no reflow; if of similar length, often no more than a line
reflow. And in any case, current machines are so fast that reflow, if
required, will usually take negligible time.