“innerHTML += …” vs “appendChild(txtNode)”

by

The latter (appendChild) does not cause a complete rebuild of the DOM or even all of the elements/nodes within the target.

The former (setting innerHTML) does cause a complete rebuild of the content of the target element, which if you’re appending is unnecessary.

Appending via innerHTML += content makes the browser run through all of the nodes in the element building an HTML string to give to the JavaScript layer. Your code then appends text to it and sets innerHTML, causing the browser to drop all of the old nodes in the target, re-parse all of that HTML, and build new nodes. So in that sense, it may not be efficient. (However, parsing HTML is what browsers do and they’re really, really fast at it.)

Setting innerHTML does indeed invalidate any references to elements within the target element you may be holding — because those elements don’t exist anymore, you removed them and then put in new ones (that look very similar) when you set innerHTML.

In short, if you’re appending, I’d use appendChild (or insertAdjacentHTML, see below). If you’re replacing, there are very valid situations where using innerHTML is a better option than creating the tree yourself via the DOM API (speed being chief amongst them).

Finally, it’s worth mentioning a couple of other alternatives:

  • append is a relatively recent addition to the DOM (but has excellent support other than truly obsolete browsers). It appends one or more items to the element, where the items can be nodes, elements, or HTML strings defining nodes and elements. Unlike appendChild, it supports HTML strings as well as nodes, and alsos supports multiple arguments. For your use case, it’s less cumbersome than the next option in this list: parent.append(htmlString).
  • insertAdjacentHTML inserts nodes and elements you supply as an HTML string into or next to an element. You can append to an element with it: theElement.insertAdjacentHTML("beforeend", "the HTML goes here"); The first argument is where to put the HTML; your choices are:
    • "beforebegin" (outside the element, just in front of it)
    • "afterbegin" (inside the element, at the beginning)
    • "beforeend" (inside the element, at the end)
    • "afterend" (outside the element, just in after it)
      Note that "afterbegin" and "beforeend" insert into the element itself, whereas "beforebegin" and "afterend" insert into the element’s parent. Browser support is basically universal.
  • insertAdjacentText is just like insertAdjacentHTML except that it inserts a text node (the text is not treated as HTML). Browser support is basically universal.

More Related Contents:

  1. Remove element by id
  2. Check if an image is loaded (no errors) with jQuery
  3. Is there a spec that the id of elements should be made global variable?
  4. onKeyPress Vs. onKeyUp and onKeyDown
  5. Javascript/DOM: How to remove all event listeners of a DOM object?
  6. How do I toggle an element’s class in pure JavaScript?
  7. What is innerHTML on input elements?
  8. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  9. How to create Document objects with JavaScript
  10. Adding an onclick event to a table row
  11. In Javascript, can you extend the DOM?
  12. AngularJS: How to run additional code after AngularJS has rendered a template?
  13. Does javascript process using an elastic racetrack algorithm
  14. Setting focus to iframe contents
  15. Get DocType of an HTML as string with Javascript
  16. Does the onchange event propagate?
  17. Change ‘s option and trigger events with JavaScript
  18. Is there any “on DOM change” event? [duplicate]
  19. Can I apply CSS to the elements within an iframe?
  20. Changing the order of elements
  21. Should I use document.createDocumentFragment or document.createElement
  22. createElement vs. createElementNS
  23. DOM / pure JavaScript solution to jQuery.closest() implementation?
  24. Is it possible to get element’s numerical index in its parent node without looping?
  25. getElementsByClassName() with two classes
  26. What is the difference between `firstChild` and `firstElementChild`?
  27. How to prevent an iframe from reloading when moving it in the DOM
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment