如何獲取包括所選元素本身的完整html字符串？

Question

有沒有一種本機Javascript方法來獲取元素innerHTML和它自己的html？ 如何獲取完整的html字符串，包括所選元素本身？

希望有道理。 此示例顯示了一種執行我想要的操作的JQuery方法，因此希望可以清楚地說明我正在嘗試執行的操作： http : //jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string -include.html

它不是那么簡單嗎？

var allHTML = myEle.outerHTML + myEle.innerHTML;

Answer 1

最合適的跨瀏覽器方法是使用得到最廣泛支持的功能，並避免諸如擴展DOM原型之類的事情（因為不需要瀏覽器來實現它們，而某些非常常見的瀏覽器則不需要），並在適當的地方使用合適的功能測試。

一個簡單的getOuterHTML函數是：

function getOuterHTML(el) {
  var d;

  if (typeof el.outerHTML == 'string') {
    return el.outerHTML;

  } else {
    d = document.createElement('div');
    d.appendChild(el.cloneNode(true));
    return d.innerHTML;
  }
}

自2000年以來，它所依賴的瀏覽器功能已在所有常見瀏覽器中可用。

Answer 2

我認為您想使用element.outerHTML 。 查看此問題 ，了解如何以跨瀏覽器的方式進行操作。

Answer 3

您只需要outerHTML ，而不是內部innerHTML ：

myEle.outerHTML

請注意，Firefox當前（2011年12月）不支持此功能，這可能會破壞交易。 請參閱http://www.quirksmode.org/dom/w3c_html.html上的支持列表。 但是，即將發布的Firefox版本將支持它。 請參閱https://bugzilla.mozilla.org/show_bug.cgi?id=92264上的錯誤報告。

Chrome，Safari，IE和Opera支持該功能。

如果需要通用支持，請參閱如何在firefox中使用OuterHTML？ 。 該問題的公認答案包括后備例程。

Answer 4

這應該對您有所幫助，將該功能添加到您的項目中的某個位置：

Node.prototype.getHTML = function() {
    var wrap = document.createElement("div");
    var cthis = this.clone();
    wrap.appendChild(cthis);
    return wrap.innerHTML;
}

然后你可以打電話

var allHtml = myEle.getHTML();

helper函數將節點暫時包裝在div中，因此在調用innerHTML時，它會獲取原始元素的所有元素。它也應該是跨瀏覽器安全的，它是我工具箱的一部分，我傾向於將其用於所有項目。