DOM create and append methods (insertAdjacentElement and insertAdjacentHTML and insertAdjacentText)

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

div#test{

background: hotpink;

border: 2px solid black;

width:350px;

height:200px;

}

</style>

</head>

<body>

<h1>DOM append methods</h1>

</div>

var newElement = document.createElement("h2");

var newText = document.createTextNode("This is just Text");

newElement.appendChild(newText);

var target = document.getElementById("test"); target.insertAdjacentElement("beforebegin",newElement);

var newhtml ="<h3>This is heading</h3>"; target.insertAdjacentHTML("afterbegin",newhtml);

var newtext ="This is Text"; target.insertAdjacentText("beforeend", newtext);

</script>

</body>

</html>

OUTPUT

Coding