insertAdjacentHTML
expects 2 arguments:
"beforebegin"
, "afterbegin"
, "beforeend"
, "afterend"
)Can I pass DOM element as the second argument?
insertAdjacentHTML() The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.
Using innerHTML means that any JavaScript references to the descendants of element will be removed. When you use insertAdjacentHTML , adding additional content will not corrupt the existing JS references and the existing nodes are not altered.
When one is clicked, it becomes selected and you can then press the Insert before and Insert after buttons to insert new divs before or after the selected element using insertAdjacentElement() .
While you can't pass a DOM element directly, it's possible to pass element.outerHTML
to feed insertAdjacentHTML
's second parameter with it's HTML string representation.
Example:
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>
For insertAdjacentHTML
, the documentation clearly states that the first argument must be of type string
element.insertAdjacentHTML(position, text);
position
is the position relative to the element, and must be one of the following strings:
"beforebegin", "afterbegin", "beforeend", "afterend"
It's not very clear about what the second argument can be, but testing shows that toString()
is executed internally on the second argument, so the answer is
yes, you can in most cases pass a DOM element as the second argument, but the real answer is no, it won't be appended to the page, instead you'll just get the string
[object HTMLDivElement]
as the DOM element is converted to a string, and that means the function always expects the second argument to be a valid string of HTML, not a DOM element.
Here's a quick test
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>
There are other methods available that are much more suitable for actual DOM elements, for instance appendChild
, insertBefore
etc.
Which one to use depends on where the element is to be inserted etc, but inserting in the same place as the four options available in insertAdjacentHTML
is possible, and generally not very hard to do.
There's also Element.insertAdjacentElement()
which works exactly like insertAdjacentHTML
, but accepts a DOM node instead of a string of HTML.
.insertAdjacentHTML()
only accept string that will be parsed as HTML and inserted (like innerHTML
)
To insert DOM element you can use .insertAdjacentElement()
MDN: https://developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With