How to use createElement, createTextNode and createComment methods in DOM JS
<!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>Test Page</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>
//create another paragraph using createElement method
document.getElementById('outer').addEventListener("click",function(){
var a = document.createElement("p").innerText="WELCOME TO THE WORLD OF WEB DESIGN";
console.log(a);
});
//ADD text using createTextNode method
document.getElementById('outer').addEventListener("click",function(){
var a = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, atque.");
console.log(a);
});
//ADD comment using createComment method
document.getElementById('outer').addEventListener("click",function(){
var a = document.createComment("THIS IS A COMMENT");
console.log(a);
});
</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>Test Page</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>
//create another paragraph using createElement method
document.getElementById('outer').addEventListener("click",function(){
var a = document.createElement("p").innerText="WELCOME TO THE WORLD OF WEB DESIGN";
console.log(a);
});
//ADD text using createTextNode method
document.getElementById('outer').addEventListener("click",function(){
var a = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, atque.");
console.log(a);
});
//ADD comment using createComment method
document.getElementById('outer').addEventListener("click",function(){
var a = document.createComment("THIS IS A COMMENT");
console.log(a);
});
</script>
</body>
</html>
Comments
Post a Comment
I WOULD APPRECIATE IF YOU LEAVE A COMMENT OR YOUR FEEDBACK HERE !!!