9201 - request for functionality similar to IE4 innerHTML/outerHTML properties.

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, enhancement, P3)

Description

[ekrock's old account (dead)]

I am creating this enhancement request only for tracking purposes; our priority
at this point for the first release is of course fulfilling standards and
shipping the product rather than making additional enhancements.

If equivalent functionality to IE4 innerHTML/outerHTML is not included in the
current or planned W3C DOM, we may wish to consider pushing for inclusion in the
DOM2 spec or another later version (and adding our own equivalent functionality
in the meantime pending a standard mechanism) at some time in the future based
on reports from developers that the presence of this feature is a convenience.
Or, is there some clever way we can provide a layer of code (possibly even in
pure JS, which would enable external developers to do this themselves as sample
code?) which maps that behavior to the W3C DOM API?

Here's an exchange of emails with Danny Goodman on the topic:

>> DannyG:
>> As to the W3C DOM method of imitating innerHTML, is there a technique
>> more efficient/sophisticated than parsing the HTML for tags, creating new
>> elements, inserting/appending nodes, etc.?

>Eric:
>Do we have to parse the HTML? Can't we walk the OO DOM tree, blow away
>all the children, and replace them? (Maybe this was what you were
>referring to.) My idea was just the quick and dirty
>blow-away-all-the-kids-and-create-new-ones;
>maybe there's a better way. vidur would be good to ask.

DannyG:
I don't think it's that simple (which is why I was asking). What we need
to do is convert a string that contains HTML into genuine node objects
before inserting/replacing in the visible document. IE does this
automatically when you assign an HTML-strewn string to an object's
outerHTML or innerHTML. That was behind my plea for providing support for
these convenience properties even though they're not in the W3C DOM.

Maybe I've missed something simple here, so I'm an eager student.

Danny
http://www.dannyg.com

Comment 1

[martin.honnen]

Cheap trick is to add an IFRAME to the current document, then document.write the
html string to the IFRAME's document, clone the children of the IFRAME's
document's body, clear the element whose innerHTML should be set and then add
the cloned nodes to it. With the IFRAME with STYLE="display: none;" it should
have no visible effect. And lastly the IFRAME gets removed.
I am attaching a proof of concept which works reliably for outerHTML while
innerHTML works one time and gives me an error which I think is related to a
gecko bug and not the code.

Comment 2

[martin.honnen]

Attachment: proof of concept for DOM cheap trick implementation of innerHTML

Comment 3

[martin.honnen]

Attachment: proof of concept for cheap trick inner/outerHTML (now without the bug the example before had)

Comment 4

[martin.honnen]

Attachment: js lib to set inner/outerHTML with NN5

Comment 5

[martin.honnen]

Attachment: example use of inner/outerHTML setting lib

Comment 6

[martin.honnen]

Attachment: source of inner/outerHTML setting js library for NN5

Comment 7

[martin.honnen]

I have created a .js library providing two functions for NN5
  HTMLElement.prototype.setInnerHTML
  HTMLElement.prototype.setOuterHTML
which provide a functionality similar to setting of these properties with IE4.
The library is includable with
  <SCRIPT LANGUAGE="JavaScript1.4"
SRC="http://bugzilla.mozilla.org/showattachment.cgi?attach_id=700"></SCRIPT>
the source is
  http://bugzilla.mozilla.org/showattachment.cgi?attach_id=702
a simple example use is
  http://bugzilla.mozilla.org/showattachment.cgi?attach_id=701

[Now Eric, let me write a view source article to teach the students (like Danny
G) how to use it]

Comment 8

[martin.honnen]

Attachment: improved js lib (avoids unnecessary node cloning)

Comment 9

[martin.honnen]

Attachment: source of improved js lib

Comment 10

[martin.honnen]

Attachment: test case for improved js lib

Comment 11

[martin.honnen]

I have improved the js lib functions for setting inner/outerHTML with NN5 as the
previous version did some unnecessary node cloning which has now been replaced
with simple node deletion in the buffer and insertion in the target element.

Comment 12

[martin.honnen]

New version of the js lib for setting inner/outerHTML plus insertAdjacentHTML
functionality:

news://news.mozilla.org/37816DB2.C61902B7%40sector27.de

Comment 13

[martin.honnen]

The thread
  news://news.mozilla.org/379D091F.1B5170B8%40meer.net
brings up a so far undocumented Range method
  createContextualFragment
which takes a html source string and parses it into a documentFragment.
So parsing html is solved natively (at least currently).

Comment 14

[Mike Shaver (:shaver -- probably not reading bugmail closely)]

Moving all non-DOM[012], non-crash bugs to M15.

Comment 15

[vidur (gone)]

In an attempt to get my bug list in order again, marking all the bugs I have
currently as ASSIGNED.

Comment 16

[sam_bravard]

Here's an example of the horrid contortions people are doing to try and get 
around this bug/lack of a badly needed feature for DHTML developers:

http://webfx.eae.net/dhtml/mozInnerHTML/mozInnerHTML.shtml

Comment 17

[Johnny Stenback (:jst)]

Didn't happen for M15, trying for M16...

Comment 18

[olivier kurzweg]

There is a method of the range object which actually provides this
functionnality: "createContextualFragment".
But my real comment is: instead of that wouldn't it be easier to expand the
under-used DOM1 DocumentFragment so that it includes methods close, open, write
and writeln from the Document object?

Comment 19

[ekrock's old account (dead)]

Reassigning to jst; I believe he's working on this for M16 anyway but just in case.

Comment 20

[Johnny Stenback (:jst)]

Nominating for beta2, beta2 should have innerHTML at least.

Comment 21

[Johnny Stenback (:jst)]

innerHTML is now supported in mozilla! Yay. I'll leave this open untill I see if
I have time to implement .outerHTML before beta2.

Comment 22

[Johnny Stenback (:jst)]

No .outerHTML support for beta2 in mozilla, removing nsbeta2 keyword and marking
this bug FIXED.

Comment 23

[Jacob Kjome]

You said no .outerHTML for beta2, well what about beta3/RTM?  

I'm sure you have done a little work on it, but maybe not enough to finish.  
I'm a lot of IE developers would be impressed if this was implemented so 
scripts they wrote for IE will work for Mozilla.  They'll be much more likely 
to adopt the Mozilla browser in that case.

Jake

Comment 24

[ekrock's old account (dead)]

nsbeta2 was feature complete. no outerHTML for Netscape 6 RTM.

Comment 25

[Jesse Ruderman]

outerHTML should get a new bug, even if it's going to be wontfix.