revision:
The insertAdjacentElement() method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.
element.insertAdjacentElement(position, element)
node.insertAdjacentElement(position, element)
Parameters:
position : A string representing the position relative to the targetElement; must match (case-insensitively) one of the following strings:
'beforebegin': before the targetElement itself.
'afterbegin': just inside the targetElement, before its first child.
'beforeend': just inside the targetElement, after its last child.
'afterend': After the targetElement itself.
element : the element to be inserted into the tree.
beforeBtn.addEventListener("click", () => {
const tempDiv = document.createElement("div");
tempDiv.style.backgroundColor = randomColor();
if (activeElem) {
activeElem.insertAdjacentElement("beforebegin", tempDiv);
}
setListener(tempDiv);
});
afterBtn.addEventListener("click", () => {
const tempDiv = document.createElement("div");
tempDiv.style.backgroundColor = randomColor();
if (activeElem) {
activeElem.insertAdjacentElement("afterend", tempDiv);
}
setListener(tempDiv);
});
Click "Move" to insert the red span after the header.
My span
<div>
<button onclick="insertFunction()">Move</button>
<p>Click "Move" to insert the red span after the header.</p>
<span id="mySpan" style="color:red">My span</span>
<h4 id="myH4">My Header</h4>
</div>
<script>
function insertFunction() {
const span = document.getElementById("mySpan");
const h4 = document.getElementById("myH4");
h4.insertAdjacentElement("afterend", span);
}
</script>
Click "Move" to insert the red span inside the header.
My span
<div>
<button onclick="insertFunction2()">Move</button>
<p>Click "Move" to insert the red span inside the header.</p>
<span id="mySpan2" style="color:red">My span</span>
<h4 id="myH42">My Header</h4>
</div>
<script>
function insertFunction2() {
const span = document.getElementById("mySpan2");
const h4 = document.getElementById("myH42");
h4.insertAdjacentElement("afterbegin", span);
}
</script>
Click "Move" to insert the red span before the header.
My span
<div>
<button onclick="insertFunction3()">Move</button>
<p>Click "Move" to insert the red span before the header.</p>
<h4 id="myH43">My Header</h4>
<p><span style="color:red">My span</span></p>
</div>
<script>
function insertFunction3() {
const span = document.getElementsByTagName("span")[2];
const h4 = document.getElementById("myH43");
h4.insertAdjacentElement("beforebegin", span);
}
</script>
Click "Move" to insert the red span inside the header.
My span
<div>
<div>
<button onclick="insertFunction4()">Move</button>
<p>Click "Move" to insert the red span inside the header.</p>
<span id="mySpan4" style="color:red">My span</span>
<h4 id="myH44">My Header</h4>
</div>
</div>
<script>
function insertFunction4() {
const span = document.getElementById("mySpan4");
const h4 = document.getElementById("myH44");
h4.insertAdjacentElement("beforeend", span);
}
</script>