CODEWITHSUNDEEP
javascript
Jongz Puangput
Jongz Puangput

Reputation: 5637

What is the difference between appendChild, insertAdjacentHTML, and innerHTML

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?

Upvotes: 26

Views: 29095

Answers (6)

The Streamer
The Streamer

Reputation: 1

the main difference is location (positioning) : (elVar mean element saved to variable)

** elVar.innerHTML: used to sets/get text and tags (like ) inside an element (if u use "=" it replace the content and "+=" will add to the end.

** divElvar.appendChild(imgElVar): to add pure element to the end of another element (or start with prepend) .

** insertedElVar.insertAdjacentElement(beforebegin,targetElvar): it insert element into spicific location before elVar (after it with "afterend").

-innerText: can replace/get/insertOnEnd text.but can read tags and text inside element with display:hidden , cant insert on start . -innercontent : show all text inc hidden , cant read html tags and it put empty spaces instead of them , cant insert on start -innerHTML: read all set all , cant insert on start

-prepend : insert text at start of elvar (but cant use to get/replace text or html) prepend was needed for start, after it made its easy to make append , not for a need , its just bcz lol

Upvotes: 0

David G
David G

Reputation: 96810

  • 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.

....

Upvotes: 26

Arnaud Leyder
Arnaud Leyder

Reputation: 7002

@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.

Upvotes: 3

Guffa
Guffa

Reputation: 700302

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.

Upvotes: 12

egig
egig

Reputation: 4430

One that I know innerHTML can grab 'inner html', appendChild and insertAdjacentHTML can't;

example:

<div id="example"><p>this is paragraph</p><div>

js:

var foo = document.getElementById('example').innerHTML;

end then now

foo = '<p>this is paragraph</p>';

Upvotes: 1

Ozerich
Ozerich

Reputation: 2000

DOCS:

appendChild

insertAdjacentHTML

innerHtml

innerHTML vs appendChild() performance

insertAdjacentHTML vs innerHTML vs appendChild performance

Upvotes: 0

Related Questions