1

When trying to place a value to an already existing element without using document.createElement() the browser displays the desired result, however, when I do it using document.createElement() I get [Object HTMLElement] but no error in the console.

For example, the following code works as intended: 

    const heading = document.querySelector('#heading');
    const headingText = "<em>I am some random text</em>";
    heading.insertAdjacentHTML("beforebegin", headingText);

However, if I were to append headingText to heading element after creating it with document.createElement() then I get the [Object HTMLElement] which is unexpected.

    const heading = document.querySelector('#heading');
    const headingText = document.createElement('em');
    headingText.textContent = "I am some random text";
    heading.insertAdjacentHTML('beforebegin', headingText);

What is the reason for this?

NOTE: I am not interested in a solution, as I already have one, as can see, I am interested in the reasoning, logic behind what's causing that and why. Thank you.

I have tried googling for an answer, but I was not able to find one. The closest I got was this question here at stackoverflow: `insertAdjacentHTML` and `createElement`

However, that does not answer my question.

NeoDicereCant
  • 21
  • 2

1 Answers1

2

The insertAdjacentHTML method takes a string as its second argument which is supposed to be the HTML you want to insert (as in the first example).

But when you pass an object as the second argument, it is converted to a string, (in this case to the string "[Object HTMLElement]") and that is inserted in the DOM.

See also https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp

Nijraj Gelani
  • 1,446
  • 18
  • 29
  • 1
    w3schools is not that good as a reference, [*MDN*](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) is generally preferred. – RobG Jun 11 '19 at 07:14