The insertAdjacentHTML JS Element 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>span</span></p>
<script>
let mylet = 0;
function myfunction()
{
document.querySelector("span").insertAdjacentHTML("afterbegin", "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>span</span></p>
<script>
let mylet = 0;
function myfunction()
{
document.querySelector("span").insertAdjacentHTML("beforeend", "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>span</span></p>
<script>
let mylet = 0;
function myfunction()
{
document.querySelector("span").insertAdjacentHTML("afterend", "afterend" + ++mylet);
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>