通过 DOM 函数附加新元素，还是使用 HTML 标签附加字符串，哪个更好？

我见过一些向 DOM 添加元素的不同方法。例如，最流行的似乎是

document.getElementById('foo').innerHTML ='<p>Here is a brand new paragraph!</p>';

or

newElement = document.createElement('p');
elementText = document.createTextNode('Here is a brand new parahraph!');
newElement.appendChild(elementText);
document.getElementById('foo').appendChild(newElement);

但我不确定做任何一个都有什么好处。是否有一个经验法则来规定何时应该做其中一个而不是另一个，或者其中一个完全是错误的？

一些注意事项：

• Using innerHTML在 IE 中速度更快，但在 chrome + firefox 中速度较慢。这是一个基准 http://jsperf.com/innerhtml-vs-w3c-dom/6用一组不断变化的<div>s + <p>s; 这是一个基准 http://jsperf.com/dom-table-generation显示这个常数，简单<table>.

• 另一方面，DOM 方法是传统标准——innerHTML在 HTML5 中标准化 - 并允许您保留对新创建的元素的引用，以便您以后可以修改它们。

• 因为innerHTML 速度快（足够）、简洁且易于使用，所以很容易在任何情况下都依赖它。但要注意使用innerHTML分离所有现有的 DOM 节点从文档中。您可以在此页面上测试以下示例。

  首先，让我们创建一个函数来测试节点是否在页面上：

  function contains(parent, descendant) {
      return Boolean(parent.compareDocumentPosition(descendant) & 16);
  }
  

  这将返回true if parent包含descendant。像这样测试一下：

  var p = document.getElementById("portalLink")
  console.log(contains(document, p)); // true
  document.body.innerHTML += "<p>It's clobberin' time!</p>";
  console.log(contains(document, p)); // false
  p = document.getElementById("portalLink")
  console.log(contains(document, p)); // true
  

  这将打印：

  true
  false
  true
  

  它可能看起来不像我们使用的innerHTML应该会影响我们对portalLink元素，但确实如此。需要再次取回才能正确使用。