我该怎么做OuterHTML在Firefox？我该怎么做OuterHTML在Firefox？(How

我的代码部分我得到的OuterHTML属性格式

"<LI onclick="TabClicked(this, 'SearchName', 'TabGroup1');">Name "

所以我可以做的东西involing解析它。

有在Firefox中的JavaScript没有的outerHTML属性，虽然，我不能找到一个替代的方式得到这个字符串。 想法？

Answer 1:

以下是我们在使用功能pure.js ：

function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

要使用它的DOM方法：

outerHTML(document.getElementById('theNode'));

和它的作品跨浏览器

编辑： 警告！ 这里是一个XMLSerializer的麻烦，它生成一个XML（XHTML）的字符串。
这意味着你可以像一个标签结束<div class="team" />代替
<div class="team"></div>
有些浏览器不喜欢它。 我有一些疼痛与Firefox 3.5最近。

所以对于我们的pure.js LIB我们回到旧的和安全的方式：

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);
  }

Answer 2:

适当的方法（用于非IE浏览器）为：

var sOuterHTML = new XMLSerializer().serializeToString(oElement);

Answer 3:

如果您愿意使用jQuery那么它的相对简单：

$('<div>').append( $(ElementSelector).clone() ).html();

这将让多个元素的外HTML如果选择多个元素。

Answer 4:

outerHTML现在Firefox支持：

从Firefox的11开发者

火狐11运于2012年这篇文章提供了有关新功能和此版本中的关键错误信息3月13日，以及链接两个Web开发人员更详细的文档和附加组件的开发。

• 该element.outerHTML属性现在支持HTML元素。

Answer 5:

对于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());   
    });  
} 

Answer 6:

试试这个： 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;
           }
         );
      }
   }
}

Answer 7:

这个怎么样简单的东西（没有完全测试）：

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 "";
}

Answer 8:

尝试：

(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

Answer 9:

如果你想要的是onclick属性，那么请尝试以下操作：这假定您没有设置使用的attachEvent或的addEventListener事件。

elm.getAttribute("onclick");

如果你想打一个outerHTML的字符串（只承诺不把它你让后除了它）：

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

这个功能应该做在大多数情况下的伎俩，但它没有考虑名称空间的考虑。

Answer 10:

弄清楚了！

child.getAttributeNode("OnClick").nodeValue;

的getAttribute没有工作，但getAttributeNode伟大的工作; d

Answer 11:

我知道这是一个古老的线程，但如果有人认为这与谷歌（像我一样） - 我想所有这些解决方案，其中没有制定出的即装即用，因为没有处理这两个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

文章来源: How do I do OuterHTML in firefox?