Question

可能重复：
How do I do OuterHTML in firefox?

有人可以使用javascript向我显示一个方法，我可以使用获取元素的innerHTML 吗？

P.S。请不要jQuery。

编辑：

最佳方法：

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

感谢@Joel下面的solution。

Answer 1

标准方法是使用innerHTML属性。

document.getElementById("element").innerHTML;

这将为您提供元素内所有HTML的全文。要获取元素本身，请使用outerHTML属性。

document.getElementById("element").outerHTML;

Answer 2

我不喜欢发布的功能所以这是我认为更好的东西。请注意，IE对innerHTML和outerHTML属性的事件侦听器有不同的处理（这是一般性注释，它不是特定于以下内容），所以要小心。序列化算法也存在差异，因此您可能无法从所有浏览器获得完全相同的内部或外部HTML。

下面的第一个版本本质上是前面发布的版本的一个更有效的版本，它使用更好的测试（在我看来）存在outerHTML属性，它更有效，因为它不会创建一个新的函数每次都重新使用保存在关闭中的div而不是每次都创建一个新的div。请注意，它仅对没有nativeHTML原生支持的浏览器执行此操作，否则不会保留临时div。

第二个版本是首选的，它与上面的版本非常相似，但它不是获取克隆的innerHTML，而是使用实际节点暂时将其替换为自身的浅层克隆，将其移动到div，得到div的innerHTML，然后把它放回去。浅层克隆是必要的，因此临时替换维护一个有效的DOM（例如，可能获得tr的outerHTML，只能用tr替换。）

xLib = {};
xLib.outerHTML = (function() {

  var d = document.createElement('div');

  // Use native outerHTML if available
  if (typeof d.outerHTML == 'string') {
    d = null;
    return function(el) {
      return el.outerHTML;
    }
  }

  // Otherwise, use clone of node and innerHTML
  return function(el) {
    var html, t = el.cloneNode(true);

    // Don't make a new div every time,
    // use div in closure 
    d.appendChild(t);
    html = d.innerHTML;

    // Remove unwanted fragment
    d.removeChild(t);

    // Remove reference to fragment
    t = null;
    return html; 
  }
}());

xLib.outerHTML2 = (function() {

  var d = document.createElement('div');

  // Use native outerHTML if available
  if (typeof d.outerHTML == 'string') {
    d = null;
    return function(el) {
      return el.outerHTML;
    }
  }

  // Otherwise, use a placeholder and
  // remove node, add to temp element,
  // get innerHTML and return node to document

  return function(el) {
    var html;
    var d2 = el.cloneNode(false);

    // Temporarily move el    
    el.parentNode.replaceChild(d2, el);

    d.appendChild(t);
    html = d.innerHTML;

    // Put element back
    el.parentNode.replaceChild(el, d2);
    d2 = null;

    return html; 
  }
}());

innerHTML包括标签

编辑：

2 个答案: