Comments on snippet: 'outerHTML in Firefox'

Yansky said on 7/31/10

Sat, 31 Jul 2010 07:19:40 GMT

var sOuterHTML = new XMLSerializer().serializeToString(oElement); via: http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox/1701117#1701117

alonbalon said on 7/17/10

Sat, 17 Jul 2010 19:49:23 GMT

This should improve a bit the first entry in this post ... function XDBGetOuterHTML(Elem){ var parent = Elem.parentNode; var nextSibling = Elem.nextSibling; var el = document.createElement(parent.tagName); el.appendChild(Elem); var shtml = el.innerHTML; parent.insertBefore(Elem , nextSibling); return shtml; }

benjamin247 said on 4/17/09

Fri, 17 Apr 2009 22:26:25 GMT

Response to Tyson: As you point out, your _defineSetter_ function will only parse out the first node of the passed code (and alternate attempts to remove the break command and rely on multiple this.parentNode.insertBefore(e.childNodes[i], this); calls results in an irregular every-other-node pattern. I've seen a variety of other approaches on the web that generally fall appart when confronted with self-closing tags (like input,img, etc). I think I've got a solution that may work in all solutions (at least it's handled every test I've managed to come up with): if (element.__defineSetter__) { element.__defineSetter__("outerHTML", function (html) { var el = document.createElement('div'); el.innerHTML = html; var range = document.createRange(); range.selectNodeContents(el); var documentFragment = range.extractContents(); this.parentNode.insertBefore(documentFragment, this); this.parentNode.removeChild(this); } ); } Anyway, between the original post and this I **think** that it should perfectly replicate outerHTML as used by other browsers.

tysonmalchow said on 3/1/09

Sun, 01 Mar 2009 00:09:01 GMT

This will enable .outerHTML as a setter in Firefox: (though it will only work if you replace an element with another single element - you can't replace one with many. this code will simply ignore anything but the first element present in the HTML/XML you pass to it.)

if (element.__defineSetter__ && DOMParser) {
    element.__defineSetter__("outerHTML",
        function (v) {
            var e = document.createElement("div");
            var root = null;
            e.innerHTML = v;
            for(var i=0; i



ewart said on 6/3/08
Tue, 03 Jun 2008 23:27:53 GMT
 oh dear, never mind i sussed that problem,  your sample works fine in my case too -- I had an event adding then removing style elements on the fly hence leaving it with style=""  in FF.  IE doesn't exhibt the same behaviour so I didn't pick it up immediately.  grrr!  cheers 


ewart said on 6/3/08
Tue, 03 Jun 2008 20:55:31 GMT
 sheesh third attempt, I guess [sometimes] the code has to be escaped..

try to move the mouse over me.
 


ewart said on 6/3/08
Tue, 03 Jun 2008 20:54:40 GMT
 second attempt at posting the extra style:

try to move the mouse over me. 


ewart said on 6/3/08
Tue, 03 Jun 2008 20:53:14 GMT
 This is absolutely needed!  and brilliant!


try to move the mouse over me.

no, move the mouse over me!


And your sample almost works too, but for some reason  what is actually returned in my FF browser is:
try to move the mouse over me.

note the extra style="" added.

I'm using it in a function:  

function getOuter(ele)
{
    var parent = ele.parentNode;
    var el = document.createElement(parent.tagName);
    el.appendChild(ele); 
    var shtml = el.innerHTML;
    parent.appendChild(ele);
    return shtml; 
}

have tried cloneNode and importNode but they don't seem to solve - any ideas?
    el.appendChild(ele.cloneNode(true)); 
    var nn = document.importNode(ele, true);

cheers