The insertAdjacentHTML of Element for JS parses the given string text as HTML or XML and inserts the resulting nodes into the tree in the position given by the position argument.
element.insertAdjacentHTML(position, text) beforebegin before the element
afterbegin inside the element, before the first child
beforeend inside the element, after the last child
afterend after the element
<!doctype html>
<html>
<head>
<style>
span
{
background-color: yellow;
}
</style>
</head>
<body>
<button>button</button>
<p><span>afterbegin</span></p>
<script>
let mylet = 0;
function myfunction()
{
document.querySelector("span").insertAdjacentHTML("afterbegin", ++mylet);
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
span
{
background-color: yellow;
}
</style>
</head>
<body>
<button>button</button>
<p><span>beforeend</span></p>
<script>
let mylet = 0;
function myfunction()
{
document.querySelector("span").insertAdjacentHTML("beforeend", ++mylet);
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
span
{
background-color: yellow;
}
</style>
</head>
<body>
<button>button</button>
<p><span>afterend</span></p>
<script>
let mylet = 0;
function myfunction()
{
document.querySelector("span").insertAdjacentHTML("afterend", ++mylet);
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>