Prev: "INSERT INTO
Next: Are Unsecured Debt Consolidation Loans the Right Solution?
From: FAQ server on 13 Apr 2010 19:00
-----------------------------------------------------------------------
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%28VS.85%29.aspx

http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.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/

--

The sendings of these daily posts are proficiently hosted
by http://www.pair.com.

From: Dr J R Stockton on 15 Apr 2010 14:13
In comp.lang.javascript message <4bc4f77a$0$286$14726298(a)news.sunsite.dk
>, Tue, 13 Apr 2010 23:00:03, FAQ server <javascript(a)dotinternet.be>
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.

--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (RFCs 5536/7)
Do not Mail News to me. Before a reply, quote with ">" or "> " (RFCs 5536/7)
From: Dr J R Stockton on 16 Apr 2010 15:42
In comp.lang.javascript message <hq80ng$j8b$1(a)news.eternal-
september.org>, Thu, 15 Apr 2010 14:33:33, Garrett Smith
<dhtmlkitchen(a)gmail.com> posted:
>Dr J R Stockton wrote:
>> In comp.lang.javascript message <4bc4f77a$0$286$14726298(a)news.sunsite.dk
>>> , Tue, 13 Apr 2010 23:00:03, FAQ server <javascript(a)dotinternet.be>
>> 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.
>>
>
>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.

--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (RFCs 5536/7)
Do not Mail News to me. Before a reply, quote with ">" or "> " (RFCs 5536/7)
From: Dr J R Stockton on 19 Apr 2010 10:51
In comp.lang.javascript message <hqe7j3$9r6$1(a)news.eternal-
september.org>, Sat, 17 Apr 2010 23:07:29, Garrett Smith
<dhtmlkitchen(a)gmail.com> posted:
>
>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.

--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (RFCs 5536/7)
Do not Mail News to me. Before a reply, quote with ">" or "> " (RFCs 5536/7)
From: Dr J R Stockton on 22 Apr 2010 09:24
In comp.lang.javascript message <4bc4f77a$0$286$14726298(a)news.sunsite.dk
>, Tue, 13 Apr 2010 23:00:03, FAQ server <javascript(a)dotinternet.be>
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<sub>J</sub>
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, ...

--
(c) John Stockton, near London. *@merlyn.demon.co.uk/?.?.Stockton(a)physics.org
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Correct <= 4-line sig. separator as above, a line precisely "-- " (RFC5536/7)
Do not Mail News to me. Before a reply, quote with ">" or "> " (RFC5536/7)
 |  Next  |  Last
Pages: 1 2 3
Prev: "INSERT INTO
Next: Are Unsecured Debt Consolidation Loans the Right Solution?