insertAdjacentElement method
The insertAdjacentElement method
allows you to insert an element anywhere
on a page. Most commonly used after
creating an element with
createElement.
The code is inserted relative to the
target element. You can insert
before the target element
(beforeBegin insertion method),
after it (afterEnd insertion method),
and also at the beginning (afterBegin
insertion method) or at the end
(beforeEnd insertion method) of
the target element.
Syntax
target element.insertAdjacentElement(insertion method, code to insert);
Example . beforeBegin method
Let a target element be the
#target element. We insert
a new paragraph before it:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
The code execution result:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Example . afterEnd method
And now we insert a new paragraph after the target element:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
The code execution result:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Example . afterBegin method
Let's insert a new paragraph at the beginning of the target element:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
The code execution result:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Example . beforeEnd method
Let's insert a new paragraph at the end of the target element:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
The code execution result:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
See also
-
the
insertAdjacentHTML,
that inserts tags at the given location -
the
insertAdjacentTextmethod
that inserts text at the given location -
the
prependmethod
that inserts elements at the start -
the
appendmethod
that inserts elements at the end -
the
appendChildmethod
that inserts elements at the end of a parent -
the
insertBeforemethod
that inserts elements before an element
