What is better, appending new elements via DOM functions, or appending strings with HTML tags?

Question

I have seen a few different methods to add elements to the DOM. The most prevelent seem to be, for example, either

document.getElementById(\'foo\').innerHTM         


        

Answer 1

Some notes:

• Using innerHTML is faster in IE, but slower in chrome + firefox. Here's one benchmark showing this with a constantly varying set of

  s +

  s; here's a benchmark showing this for a constant, simple

  .

  On the other hand, the DOM methods are the traditional standard -- innerHTML is standardized in HTML5 -- and allow you to retain references to the newly created elements, so that you can modify them later.

  Because innerHTML is fast (enough), concise, and easy to use, it's tempting to lean on it for every situation. But beware that using innerHTML detaches all existing DOM nodes from the document. Here's an example you can test on this page.

  First, let's create a function that lets us test whether a node is on the page:

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

  This will return true if parent contains descendant. Test it like this:

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

  This will print:

  true
  false
  true
  

  It may not look like our use of innerHTML should have affected our reference to the portalLink element, but it does. It needs to be retrieved again for proper use.

  0 讨论(0)

  查看其它6个回答

  发布评论:

  提交评论

  ---

  •  加载中...

  验证码

   看不清?

  提交回复

  热议问题