DOM insertAdjacentElement and insertAdjacentHTML insertAdjacent Methods tutorial in JavaScript

October 09, 2024

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM insertAdjacentElement insertAdjacentHTML insertAdjacent Methods JavaScript</title>
    <link rel="stylesheet"
        href="css/DOM_insertAdjacentElement_insertAdjacentHTML_insertAdjacent_Methods_JavaScript.css">
</head>

<body>
    <div id="test">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur aperiam eos vel consequatur. Delectus
            voluptas
            dolorem id exercitationem, ad ipsam consectetur hic ullam provident! Adipisci exercitationem ipsam rerum
            sunt
            doloremque magni soluta, delectus maiores, sapiente quasi labore praesentium accusamus earum cum nam saepe
            qui?
            Accusamus provident quo perferendis sint sed.</p>
    </div>
    <script src="js/DOM_insertAdjacentElement_insertAdjacentHTML_insertAdjacent_Methods_JavaScript.js"></script>
</body>

</html>





Below File is css/DOM_insertAdjacentElement_insertAdjacentHTML_insertAdjacent_Methods_JavaScript.css File
#test {
    background: #ffff00;
    width: 800px;
    height: 200px;
    padding: 10px 10px;
    margin: 0 auto;
}




Below File is js/DOM_insertAdjacentElement_insertAdjacentHTML_insertAdjacent_Methods_JavaScript.js File
var newElement = document.createElement("h2");
console.log(newElement);

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

newElement.appendChild(newText);

var target = document.getElementById("test");

target.insertAdjacentElement("beforebegin", newElement);
target.insertAdjacentElement("afterbegin", newElement);

//insertAdjacentHTML
var targetTwo = document.getElementById("test");

var newElementTwo = "<h2>This is Heading Two</h2>";

targetTwo.insertAdjacentHTML("afterbegin", newElementTwo);
targetTwo.insertAdjacentHTML("afterend", newElementTwo);
targetTwo.insertAdjacentHTML("beforeend", newElementTwo);

//insertAdjacentText
var targetThree = document.getElementById("test");

var newElementThree = "This is new Text";

targetThree.insertAdjacentText("beforeend", newElementThree);
targetThree.insertAdjacentText("afterend", newElementThree);
targetThree.insertAdjacentText("beforebegin", newElementThree);
targetThree.insertAdjacentText("afterbegin", newElementThree);