FAQ Topic - How do I modify the content of the current page?(2010-04-14)
in [JavaScript]
|
Prev: test code with firefox 3.5.8 or better
Next: FAQ Topic - How can I see in javascript if a web browser accepts cookies? (2010-04-16)
From: Garrett Smith on 15 Apr 2010 17:33 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? 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/
From: Garrett Smith on 18 Apr 2010 02:07 Dr J R Stockton wrote: > 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. > 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/
From: Garrett Smith on 22 Apr 2010 20:12 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"; > > 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/
From: Garrett Smith on 25 Apr 2010 03:22 Dr J R Stockton wrote: > In comp.lang.javascript message <hqqom3$jlf$1(a)news.eternal- > september.org>, Thu, 22 Apr 2010 17:12:47, 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? >>>> --- [...] >> 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/
From: Garrett Smith on 26 Apr 2010 23:37
Dr J R Stockton wrote: > In comp.lang.javascript message <hr0qk7$205$1(a)news.eternal- > september.org>, Sun, 25 Apr 2010 00:22:44, Garrett Smith > <dhtmlkitchen(a)gmail.com> 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&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. > 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/ |