Могу ли я использовать insertAdjacentHTML для вставки элемента DOM

Ответ 1

.insertAdjacentHTML() принимает только строку, которая будет проанализирована как HTML и вставлена (например, innerHTML)

Чтобы вставить элемент DOM, вы можете использовать .insertAdjacentElement()

MDN: https://developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement

Ответ 2

Для insertAdjacentHTML в документации четко указано, что первый аргумент должен иметь тип string

element.insertAdjacentHTML(position, text);

position - это позиция относительно элемента, и она должна быть одной из следующих строк:
"beforebegin", "afterbegin", "beforeend", "afterend"

Не совсем понятно, каким может быть второй аргумент, но тестирование показывает, что toString() выполняется для второго аргумента внутренне, поэтому ответ

да, в большинстве случаев вы можете передать элемент DOM в качестве второго аргумента, но реальный ответ - нет, он не будет добавлен на страницу, вместо этого вы просто получите строку

[object HTMLDivElement]

поскольку элемент DOM преобразуется в строку, а это означает, что функция всегда ожидает, что второй аргумент является допустимой строкой HTML, а не элементом DOM.

Здесь быстрый тест

var d1 = document.getElementById('one'); 

var d3 = document.createElement('div');
d3.innerHTML = 'three';

d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

d1.insertAdjacentHTML('afterend', d3);

<div id="one">one</div>

Ответ 3

Пока вы не можете напрямую передать элемент DOM, можно передать element.outerHTML, чтобы подать insertAdjacentHTML второй параметр с его представлением строки HTML.

Пример:

const parent = document.querySelector('.parent');
const child = document.createElement('p');

child.innerHTML = 'Awesome!';
parent.insertAdjacentHTML('beforeend', child.outerHTML);

// <div class="parent">
//   <p>Awesome!</p>
// </div>