如何在Firefox中执行OuterHTML？
我的代码的一部分，我得到的OuterHTML propery
"<LI onclick="TabClicked(this, 'SearchName', 'TabGroup1');">Name " 所以我可以做parsing它的东西。
在Firefox上没有OuterHTML属性在Firefox上，但我找不到另一种方法来获取此string。 想法？
这里是我们在pure.js中使用的函数：
function outerHTML(node){ return node.outerHTML || new XMLSerializer().serializeToString(node); }
要使用它的DOM方式：
outerHTML(document.getElementById('theNode'));
它适用于跨浏览器
编辑： 警告！ XMLSerializer有一个问题，它会生成一个XML（XHTML）string。
这意味着你最终可以使用像<div class="team" />而不是
<div class="team"></div>
有些浏览器不喜欢它。 我最近在Firefox 3.5上遇到了一些麻烦。
所以对于我们的pure.js库，我们回到了古老而安全的方式：
function outerHTML(node){ // if IE, Chrome take the internal method otherwise build one return node.outerHTML || ( function(n){ var div = document.createElement('div'), h; div.appendChild( n.cloneNode(true) ); h = div.innerHTML; div = null; return h; })(node); }
正确的方法（对于非IE浏览器）是：
var sOuterHTML = new XMLSerializer().serializeToString(oElement);
如果你愿意使用jQuery，那么它相对简单：
$('<div>').append( $(ElementSelector).clone() ).html();
如果select多个元素，这将获得多个元素的外部HTML 。
Firefox现在支持outerHTML ：
从Firefox 11开发者
Firefox 11于2012年3月13日发布。本文提供了有关此发行版中修复的新function和主要错误的信息，以及有关Web开发人员和附加开发人员的更详细文档的链接。
- HTML元素现在支持element.outerHTML属性。
由于W3C不包含outerHTML属性，您只需添加以下内容：
if (typeof (HTMLElement) != "undefined" && !window.opera) { HTMLElement.prototype._____defineGetter_____("outerHTML", function() { var a = this.attributes, str = "<" + this.tagName, i = 0; for (; i < a.length; i++) if (a[i].specified) str += " " + a[i].name + '="' + a[i].value + '"'; if (!this.canHaveChildren) return str + " />"; return str + ">" + this.innerHTML + "</" + this.tagName + ">"; }); HTMLElement.prototype._____defineSetter_____("outerHTML", function(s) { var r = this.ownerDocument.createRange(); r.setStartBefore(this); var df = r.createContextualFragment(s); this.parentNode.replaceChild(df, this); return s; }); HTMLElement.prototype._____defineGetter_____("canHaveChildren", function() { return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase()); }); }
试试这个： http : //snipplr.com/view/5460/outerhtml-in-firefox/ ：
if (document.body.__defineGetter__) { if (HTMLElement) { var element = HTMLElement.prototype; if (element.__defineGetter__) { element.__defineGetter__("outerHTML", function () { var parent = this.parentNode; var el = document.createElement(parent.tagName); el.appendChild(this); var shtml = el.innerHTML; parent.appendChild(this); return shtml; } ); } } }
怎么样这样简单（没有完全testing）：
function outerHTML(node) { var el; if (node.outerHTML) { return node.outerHTML; } else if (node.parentNode && node.parentNode.nodeType == 1) { var el = document.createElement(node.parentNode.nodeName); el.appendChild( node.cloneNode(true) ); return el.innerHTML; } return ""; }
尝试：
(function(ele, html) {if (typeof(ele.outerHTML)=='undefined') {var r=ele.ownerDocument.createRange(); r.setStartBefore(ele); ele.parentNode.replaceChild(r.createContextualFragment(html), ele); } else {ele.outerHTML=html; } })(aEle, aHtml);
为diyism
如果您只想要onclick属性，请尝试以下操作：这假定您没有使用attachEvent或addEventListener设置事件。
elm.getAttribute("onclick");
如果你想制作一个outerHTMLstring（只要保证在做完之后不要拆开它）：
function outerHTML(elm){ var ret = "<"+elm.tagName; for(var i=0; i<elm.attributes.length; i++){ var attr = elm.attributes[i]; ret += " "+attr.name+"=\""+attr.nodeValue.replace(/"/, "\"")+"\""; } ret += ">"; ret += elm.innerHTML+"</"+elm.tagName+">"; return ret; }
在大多数情况下，这个函数应该可以做到这一点，但是它并不考虑命名空间。
弄清楚了！
child.getAttributeNode("OnClick").nodeValue;
getAttribute不起作用，但getAttributeNode工作得很好; D
我知道这是一个古老的线程，但如果任何人发现这与谷歌（像我一样） – 我尝试了所有这些解决scheme，并没有一个开箱即用，因为没有处理outerHTML的获取和设置属性。 我发现这个：对我有效：
// Implement the outerHTML property for browsers that don't support it. // Assumes that the browser does support innerHTML, has an extensible // Element.prototype, and allows getters and setters to be defined. (function() { // If we already have outerHTML return without doing anything if (document.createElement("div").outerHTML) return; // Return the outer HTML of the element referred to by this function outerHTMLGetter() { var container = document.createElement("div"); // Dummy element container.appendChild(this.cloneNode(true)); // Copy this to dummy return container.innerHTML; // Return dummy content } // Set the outer HTML of the this element to the specified value function outerHTMLSetter(value) { // Create a dummy element and set its content to the specified value var container = document.createElement("div"); container.innerHTML = value; // Move each of the nodes from the dummy into the document while(container.firstChild) // Loop until container has no more kids this.parentNode.insertBefore(container.firstChild, this); // And remove the node that has been replaced this.parentNode.removeChild(this); } // Now use these two functions as getters and setters for the // outerHTML property of all Element objects. Use ES5 Object.defineProperty // if it exists and otherwise fall back on __defineGetter__ and Setter__. if (Object.defineProperty) { Object.defineProperty(Element.prototype, "outerHTML", { get: outerHTMLGetter, set: outerHTMLSetter, enumerable: false, configurable: true }); } else { Element.prototype.__defineGetter__("outerHTML", outerHTMLGetter); Element.prototype.__defineSetter__("outerHTML", outerHTMLSetter); } }());
荣誉： https ： //www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-15/implementing-the-outerhtml
