What is the difference between appendChild, insertAdjacentHTML, and innerHTML

Question

I want to know what the difference is between appendChild, insertAdjacentHTML, and innerHTML.

I think their functionality are similar but I want to understand clearly in term of usage and not the execution speed.

1. For example, I can use innerHTML to insert a new tag or text into another tag in HTML but it replaces the current content in that tag instead of appends.

2. If I would like to do it that way (not replace) I need to use insertAdjacentHTML and I can manage where I want to insert a new element (beforebegin, afterbegin, beforeend, afterend)

3. And the last if I want to create (not insertion in current tag) a new tag and insert it into HTML I need to use appendChild.

---

Am I understanding it correctly? Or are there any difference between those three?

Answer 1

• element.innerHTML

  From MDN:

  innerHTML sets or gets the HTML syntax describing the element's descendants.

  when writing to innerHTML, it will overwrite the content of the source element. That means the HTML has to be loaded and re-parsed. This is not very efficient especially when using inside loops.

• node.appendChild

  From MDN:

  Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

  This method is supported by all browsers and is a much cleaner way of inserting nodes, text, data, etc. into the DOM.

• element.insertAdjacentHTML

  From MDN:

  parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. [ ... ]

  This method is also supported by all browsers.

....

Answer 2

The appendChild methods adds an element to the DOM.

The innerHTML property and insertAdjacentHTML method takes a string instead of an element, so they have to parse the string and create elements from it, before they can be put into the DOM.

The innerHTML property can be used both for getting and setting the HTML code for the content of an element.

Answer 3

@Guffa did explain the main difference ie innerHTML and insertAdjacentHTML need to parse the string before adding to DOM.

In addition see this jsPerf that will tell you that generally appendChild is faster for the job it provides.