insertAdjacentHTML 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
beforebegin
afterbegin
<!doctype html>
<html>
<head>
<style>
span
{
background-color: yellow;
}
</style>
</head>
<body>
<button>button</button>
<p><span>afterbegin</span></p>
<script>
var myvar = 0;
function myfunction()
{
document.querySelector("span").insertAdjacentHTML("afterbegin", "insert" + ++myvar);
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>
beforeend
<!doctype html>
<html>
<head>
<style>
span
{
background-color: yellow;
}
</style>
</head>
<body>
<button>button</button>
<p><span>beforeend</span></p>
<script>
var myvar = 0;
function myfunction()
{
document.querySelector("span").insertAdjacentHTML("beforeend", "insert" + ++myvar);
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>
afterend
<!doctype html>
<html>
<head>
<style>
span
{
background-color: yellow;
}
</style>
</head>
<body>
<button>button</button>
<p><span>afterend</span></p>
<script>
var myvar = 0;
function myfunction()
{
document.querySelector("span").insertAdjacentHTML("afterend", "insert" + ++myvar);
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>
Internal
External