is there a difference between elements created dynamically with JavaScript and elements in HTML

Question

take the code below:

    contentsDiv.innerHTML = container.outerHTML;

    if(contentsDiv.firstChild === container) console.log('true');

in this code, contentsDiv is a div created in my html file while container is a div with class='container' created with JavaScript. Then i insert container into contentsDiv. But when i check to see if the contentsDiv's firstChild is equal to container (which it is in the DOM) it doesnt console.log('true')

I tried

    console.log(typeof(contentsDiv.firstChild))
    console.log(typeof(container))

both returned to be an object but somehow they don't resolve to be equal when i use '==' or '==='

Element: outerHTML property - Web APIs | MDN — Element: innerHTML property - Web APIs | MDN — Roko C. Buljan
– Roko C. Buljan, Commented Aug 1 at 7:56

fdomn-m · Accepted Answer · 2025-07-31 08:13:09Z

5

container.outerHTML is the HTML of container, it's not the container itself.

Consider:

contentsDiv.innerHTML = container.outerHTML;
contentsDiv2.innerHTML = container.outerHTML;

would you expect both contentsDiv.firstChild and contentsDiv2.firstChild to now both be equal to container when there's clearly now two versions of "container"?

Using .innerHTML = ... .outerHTML means you're creating new DOM elements from HTML strings. The == / === is comparing those newly created DOM elements.

which it is in the DOM

No, what you're seeing when you use inspect is the HTML, which is the same in the DOM, not the nodes themselves

answered Jul 31 at 8:13

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KooiInc · Accepted Answer · 2025-07-31 15:14:58Z

As said, you are adding the (outer) html of the container element. That is a string.

Here is an example that hopefully make things clearer:

// create the container
const container = Object.assign(
  document.createElement(`div`), 
  {className: `container`, textContent: `I am container`} );

// retrieve contents
const contents = document.querySelector(`#content`);

// set contents.innerHTML
contents.innerHTML = container.outerHTML;

// what is it?
console.log(
  `contents.firstChild === container: `,
  contents.firstChild === container ? `yep` : `no`);
console.log(
  `contents.innerHTML === container.outerHTML: `,
  contents.innerHTML === container.outerHTML ? `yep` : `no`);

// append the container to contents
// now you see 2 container elements in contents
contents.append(container);

console.log(`*Appended container`);

// what is the first container now?
console.log(
  `contents.querySelector(".container") === container: `,
  contents.querySelector(`.container`) === container ? `yep` : `no`);

// what is the second (appended) container now?
console.log(
  `contents.querySelector(".container:nth-child(2)") === container: `,
  contents.querySelector(`.container:nth-child(2)`) === container 
    ? `yep` : `no`);

<div id="content"></div>

traktor · Accepted Answer · 2025-08-01 11:20:07Z

An HTML source string assigned as the innerHTML property of an element already in the DOM is used to create a structure of one or more nodes (such as comment, element and text nodes etc.) in the DOM under the element whose property was assigned.

The HTML source string is not the same as the nodes created in the DOM used to represent it.

At this point If can be useful to recall that the same node cannot exist in two places in the DOM at the same time. If a node is ever assigned to a different parent object in the DOM it is moved from its previous position as a child or some node to that of a child of the new parent.

This means that the expectation that two nodes in the DOM might ever be the same is a misunderstanding that they ever could be - they can't. I hope this clears up the confusion.

Collectives™ on Stack Overflow

is there a difference between elements created dynamically with JavaScript and elements in HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related