DOM appendChild and insertBefore Append 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 appendChild insertBefore Append Methods JavaScript</title>
    <link rel="stylesheet" href="css/DOM_appendChild_insertBefore_Append_Methods_JavaScript.css">
</head>

<body>
    <h1>Hello World : DOM Append Methods</h1>
    <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>
        <h3>Hello World</h3>
    </div>
    <script src="js/DOM_appendChild_insertBefore_Append_Methods_JavaScript.js"></script>
</body>

</html>





Below File is css/DOM_appendChild_insertBefore_Append_Methods_JavaScript.css File
h1 {
    text-align: center;
    color: #ff0000;
}

#test {
    background: #ffff00;
    width: 800px;
    height: 200px;
    padding: 10px 10px;
    margin: 0 auto;
}





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

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

var newComment = document.createComment("This is just comment.");
//Append TextNode with ElementNode as shown below :
newElement.appendChild(newText);

//appendChild() will append at last position of anything :
document.getElementById("test").appendChild(newElement);
document.getElementById("test").appendChild(newComment);

var target = document.getElementById("test");
target.insertBefore(newElement, target.childNodes[0]);