Почему вставка вновь созданного элемента в существующий элемент анализирует [Object HTMLElement]? - PullRequest
Новая
       44

Почему вставка вновь созданного элемента в существующий элемент анализирует [Object HTMLElement]?

1 голос
/ 11 июня 2019

При попытке поместить значение в уже существующий элемент без использования document.createElement() браузер отображает желаемый результат, однако, когда я делаю это с использованием document.createElement(), я получаю [Object HTMLElement], но в консоли нет ошибки.

Например, следующий код работает как задумано: 

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

Однако, если я добавлю headingText к элементу заголовка после его создания с помощью document.createElement(), тогда я получу [Object HTMLElement]что является неожиданным. 

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

В чем причина этого?

ПРИМЕЧАНИЕ. Мне не интересно решение, так как оно у меня уже есть, как видите, меня интересуетрассуждение, логика того, что вызывает это и почему.Спасибо.

Я пытался найти ответ, но не смог его найти.Наиболее близким я получил этот вопрос здесь в stackoverflow: `insertAdjacentHTML` и` createElement`

Однако это не отвечает на мой вопрос.

1 Ответ

2 голосов
/ 11 июня 2019

Метод insertAdjacentHTML принимает строку в качестве второго аргумента, который должен быть HTML, который вы хотите вставить (как в первом примере).

Но когда вы передаете объект в качестве второго аргумента, он преобразуется в строку (в данном случае в строку «[Object HTMLElement]») и вставляется в DOM.

См. также https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp

...