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

Discussion in 'Javascript' started by FAQ server, Apr 14, 2010.

  1. FAQ server

    FAQ server Guest

    -----------------------------------------------------------------------
    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/

    --

    The sendings of these daily posts are proficiently hosted
    by http://www.pair.com.
     
    FAQ server, Apr 14, 2010
    #1
    1. Advertising

  2. In comp.lang.javascript message <4bc4f77a$0$286$
    >, Tue, 13 Apr 2010 23:00:03, FAQ server <>

    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)
     
    Dr J R Stockton, Apr 15, 2010
    #2
    1. Advertising

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

    Dr J R Stockton wrote:
    > In comp.lang.javascript message <4bc4f77a$0$286$
    >> , Tue, 13 Apr 2010 23:00:03, FAQ server <>

    > 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?

    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%28VS.85%29.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".
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, Apr 15, 2010
    #3
  4. In comp.lang.javascript message <hq80ng$j8b$-
    september.org>, Thu, 15 Apr 2010 14:33:33, Garrett Smith
    <> posted:
    >Dr J R Stockton wrote:
    >> In comp.lang.javascript message <4bc4f77a$0$286$
    >>> , Tue, 13 Apr 2010 23:00:03, FAQ server <>

    >> 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)
     
    Dr J R Stockton, Apr 16, 2010
    #4
  5. Re: FAQ Topic - How do I modify the content of the current page?(2010-04-14)

    Dr J R Stockton wrote:
    > In comp.lang.javascript message <hq80ng$j8b$-
    > september.org>, Thu, 15 Apr 2010 14:33:33, Garrett Smith
    > <> posted:
    >> Dr J R Stockton wrote:
    >>> In comp.lang.javascript message <4bc4f77a$0$286$
    >>>> , Tue, 13 Apr 2010 23:00:03, FAQ server <>
    >>> 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.
    >


    MSDN and DevMo documentation are linked.
    <http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.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/library/documentation/AppleApplications/Reference/WebKitDOMRef/HTMLElement_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.
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, Apr 18, 2010
    #5
  6. In comp.lang.javascript message <hqe7j3$9r6$-
    september.org>, Sat, 17 Apr 2010 23:07:29, Garrett Smith
    <> 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)
     
    Dr J R Stockton, Apr 19, 2010
    #6
  7. In comp.lang.javascript message <4bc4f77a$0$286$
    >, Tue, 13 Apr 2010 23:00:03, FAQ server <>

    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/?.?
    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)
     
    Dr J R Stockton, Apr 22, 2010
    #7
  8. Re: FAQ Topic - How do I modify the content of the current page?(2010-04-14)

    Dr J R Stockton wrote:
    > In comp.lang.javascript message <4bc4f77a$0$286$
    >> , Tue, 13 Apr 2010 23:00:03, FAQ server <>

    > 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.
    >


    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.

    >
    >> 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.
    >


    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?
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, Apr 23, 2010
    #8
  9. In comp.lang.javascript message <hqqom3$jlf$-
    september.org>, Thu, 22 Apr 2010 17:12:47, Garrett Smith
    <> posted:
    >Dr J R Stockton wrote:
    >> In comp.lang.javascript message <4bc4f77a$0$286$
    >>> , Tue, 13 Apr 2010 23:00:03, FAQ server <>

    >> 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.
    >>

    >
    >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.



    >>> 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.
    >>

    >
    >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.


    >> 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?


    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?

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 7.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    I find MiniTrue useful for viewing/searching/altering files, at a DOS prompt;
    free, DOS/Win/UNIX, <URL:http://www.idiotsdelight.net/minitrue/> unsupported.
     
    Dr J R Stockton, Apr 24, 2010
    #9
  10. Re: FAQ Topic - How do I modify the content of the current page?(2010-04-14)

    Dr J R Stockton wrote:
    > In comp.lang.javascript message <hqqom3$jlf$-
    > september.org>, Thu, 22 Apr 2010 17:12:47, Garrett Smith
    > <> posted:
    >> Dr J R Stockton wrote:
    >>> In comp.lang.javascript message <4bc4f77a$0$286$
    >>>> , Tue, 13 Apr 2010 23:00:03, FAQ server <>
    >>> posted:
    >>>> ---
    >>>> FAQ Topic - How do I modify the content of the current
    >>>> page?
    >>>> ---

    [...]
    >> 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);

    >
    >> 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.
    >


    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.

    [...]

    >>>

    >> 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.
    >


    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.

    [...]
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, Apr 25, 2010
    #10
  11. In comp.lang.javascript message <hr0qk7$205$-
    september.org>, Sun, 25 Apr 2010 00:22:44, Garrett Smith
    <> posted:


    >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.

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 7.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    MiniTrue is good for viewing/searching/altering files, at a DOS / CMD prompt;
    free, DOS/Win/UNIX, see via <URL:http://www.merlyn.demon.co.uk/pc-links.htm>.
     
    Dr J R Stockton, Apr 26, 2010
    #11
  12. Re: FAQ Topic - How do I modify the content of the current page?(2010-04-14)

    Dr J R Stockton wrote:
    > In comp.lang.javascript message <hr0qk7$205$-
    > september.org>, Sun, 25 Apr 2010 00:22:44, Garrett Smith
    > <> posted:
    >
    >
    >> 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.
    >


    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
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, Apr 27, 2010
    #12
  13. In comp.lang.javascript message <hr5m5p$hph$-
    september.org>, Mon, 26 Apr 2010 20:37:27, Garrett Smith
    <> posted:
    >Dr J R Stockton wrote:
    >> In comp.lang.javascript message <hr0qk7$205$-
    >> september.org>, Sun, 25 Apr 2010 00:22:44, Garrett Smith
    >> <> posted:
    >>
    >>> 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.
    >>

    >
    >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.

    >> 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



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

    --
    (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)
     
    Dr J R Stockton, Apr 28, 2010
    #13
  14. Re: FAQ Topic - How do I modify the content of the current page?(2010-04-14)

    Dr J R Stockton wrote:
    > In comp.lang.javascript message <hr5m5p$hph$-
    > september.org>, Mon, 26 Apr 2010 20:37:27, Garrett Smith
    > <> posted:
    >> Dr J R Stockton wrote:
    >>> In comp.lang.javascript message <hr0qk7$205$-
    >>> september.org>, Sun, 25 Apr 2010 00:22:44, Garrett Smith
    >>> <> posted:
    >>>
    >>>> 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


    [...]

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


    [about Queen's English, etc]

    [...]

    >>> 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

    >
    >
    > 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?"
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, May 1, 2010
    #14
  15. In comp.lang.javascript message <hrgeuf$ac2$-
    september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith
    <> posted:
    >Dr J R Stockton wrote:

    [GS:]
    >>> 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".
    >>

    >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 <4bc4f77a$0$286$
    >, Tue, 13 Apr 2010 23:00:03, FAQ server <>

    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.

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 7.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    MiniTrue is good for viewing/searching/altering files, at a DOS / CMD prompt;
    free, DOS/Win/UNIX, new via <URL:http://www.merlyn.demon.co.uk/pc-links.htm>.
     
    Dr J R Stockton, May 2, 2010
    #15
  16. Re: FAQ Topic - How do I modify the content of the current page?(2010-04-14)

    Dr J R Stockton wrote:
    > In comp.lang.javascript message <hrgeuf$ac2$-
    > september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith
    > <> posted:
    >> 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
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, May 2, 2010
    #16
  17. Re: FAQ Topic - How do I modify the content of the current page?(2010-04-14)

    Garrett Smith wrote:
    > Dr J R Stockton wrote:
    >> In comp.lang.javascript message <hrgeuf$ac2$-
    >> september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith
    >> <> 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.
    |
    | 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
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
     
    Garrett Smith, May 5, 2010
    #17
  18. In comp.lang.javascript message <hrqto9$dv5$-
    september.org>, Tue, 4 May 2010 21:55:34, Garrett Smith
    <> posted:
    >Garrett Smith wrote:
    >> Dr J R Stockton wrote:
    >>> In comp.lang.javascript message <hrgeuf$ac2$-
    >>> september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith
    >>> <> 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 }

    --
    (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links;
    Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
    No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
     
    Dr J R Stockton, May 6, 2010
    #18
  19. FAQ server

    David Mark Guest

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

    Dr J R Stockton wrote:
    > In comp.lang.javascript message <hrqto9$dv5$-
    > september.org>, Tue, 4 May 2010 21:55:34, Garrett Smith
    > <> posted:
    >> Garrett Smith wrote:
    >>> Dr J R Stockton wrote:
    >>>> In comp.lang.javascript message <hrgeuf$ac2$-
    >>>> september.org>, Fri, 30 Apr 2010 22:41:32, Garrett Smith
    >>>> <> 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.
     
    David Mark, May 7, 2010
    #19
  20. In comp.lang.javascript message <hrvu7q$7cr$-
    september.org>, Thu, 6 May 2010 22:29:11, David Mark
    <> posted:


    >> 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.


    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.

    --
    (c) John Stockton, nr London UK. ?@merlyn.demon.co.uk DOS 3.3 6.20 ; WinXP.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links.
    PAS EXE TXT ZIP via <URL:http://www.merlyn.demon.co.uk/programs/00index.htm>
    My DOS <URL:http://www.merlyn.demon.co.uk/batfiles.htm> - also batprogs.htm.
     
    Dr J R Stockton, May 9, 2010
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. FAQ server
    Replies:
    1
    Views:
    102
    PDannyD
    Aug 28, 2006
  2. FAQ server
    Replies:
    0
    Views:
    77
    FAQ server
    Oct 25, 2006
  3. FAQ server
    Replies:
    0
    Views:
    102
    FAQ server
    Dec 22, 2006
  4. FAQ server
    Replies:
    2
    Views:
    99
    Dr J R Stockton
    Feb 21, 2007
  5. FAQ server
    Replies:
    0
    Views:
    118
    FAQ server
    Apr 23, 2007
Loading...

Share This Page