insertAdjacentHTML
ожидает 2 аргумента:
- (
"beforebegin"
,"afterbegin"
,"beforeend"
,"afterend"
) - html (будет преобразован из текста в DOM)
Могу ли я передать элемент DOM в качестве второго аргумента?
insertAdjacentHTML
ожидает 2 аргумента:
"beforebegin"
, "afterbegin"
, "beforeend"
, "afterend"
)Могу ли я передать элемент DOM в качестве второго аргумента?
.insertAdjacentHTML()
принимает только строку, которая будет проанализирована как HTML и вставлена (например, innerHTML
)
Чтобы вставить элемент DOM, вы можете использовать .insertAdjacentElement()
MDN: https://developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement
Для 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>
Пока вы не можете напрямую передать элемент 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>