How to Append any div at our required position by using the method insertBefore in Javascript
<!DOCTYPE html>
<html lang="en" id="hello">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>How to Append any div at our required position by using the method insertBefore in Javascript</title>
<script src="main.js"></script>
</head>
<body>
<div id="outer">
<h1 id="selector" style="border: 2px solid dodgerblue; padding : 2px"> RUSTIC TRAVEL JUNKIE</h1>
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab. </p>
<button id="inner">CLICK ME</button>
</div>
<script>
document.querySelector('#outer').addEventListener("click",function(){
var a = document.createElement("p");
//create another paragraph using createElement method
var b = document.createTextNode("Lorem ipsum dolor sit amet.");
//ADD text using createTextNode method
a.appendChild(b); //append the text into the tag p
document.getElementById('outer').appendChild(a); //append p with outer div
var test= document.getElementById("para");
test.insertBefore(a,test.childNodes[1]);
});
</script>
</body>
</html>
<html lang="en" id="hello">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>How to Append any div at our required position by using the method insertBefore in Javascript</title>
<script src="main.js"></script>
</head>
<body>
<div id="outer">
<h1 id="selector" style="border: 2px solid dodgerblue; padding : 2px"> RUSTIC TRAVEL JUNKIE</h1>
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab. </p>
<button id="inner">CLICK ME</button>
</div>
<script>
document.querySelector('#outer').addEventListener("click",function(){
var a = document.createElement("p");
//create another paragraph using createElement method
var b = document.createTextNode("Lorem ipsum dolor sit amet.");
//ADD text using createTextNode method
a.appendChild(b); //append the text into the tag p
document.getElementById('outer').appendChild(a); //append p with outer div
var test= document.getElementById("para");
test.insertBefore(a,test.childNodes[1]);
});
</script>
</body>
</html>
Output of the above code, the newly created para gets appended after the main para as many times as we click it:
Comments
Post a Comment
I WOULD APPRECIATE IF YOU LEAVE A COMMENT OR YOUR FEEDBACK HERE !!!