DOM Methods - createNode - createTextNode
insertBefore - replaceChild - remove &
setAttribute
Code for creating an h1 element and appending it to the body section of an HTML page using Javavscript
<!--Creating a child node and adding it to HTML Body-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<script>
<!-- Create an element-->
const k = document.createElement("h1");
const t = document.createTextNode("This is the text in h1");
k.append(t);
document.body.appendChild(k);
</script>
</body>
</html>
Output
Creating an h1 element and appending to to another child node (inside a div element) in html
<!--Creating a child node and appending it to another child node (a div) in html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
<style>
#test
{
background-color: aqua;
}
</style>
</head>
<body>
<div id="test">
Hello this is the div
</div>
<script>
<!-- Create an element-->
const k = document.createElement("h1");
const t = document.createTextNode("This is the text in div");
k.append(t);
document.getElementById("test").appendChild(k);
</script>
</body>
</html>
Output
Code for creating an h1 element and inserting the h1 element before a paragraph element
<!--Inserting before an existing element inside a parent element-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<div id="test">
<p id="e">I am already there</p>
</div>
<script>
const new_element = document.createElement("h1");
const element_text = document.createTextNode("This is a Heading");
new_element.append(element_text);
const par = document.getElementById("test");
const existing_element = document.getElementById("e");
par.insertBefore(new_element,existing_element);
</script>
</body>
</html>
Output
Code for removing an element from the HTML body
<!--Removing a Node from the HTML Body-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
<style>
#test
{
background-color: aqua;
}
</style>
</head>
<body>
<div id="test">
Hello this is the div
</div>
<p>I am still there</p>
<script>
//delete an element
document.body.childNodes[1].remove();
</script>
</body>
</html>
Output
Code for Removing a Node from the HTML Body using getelementbyId
<!--Removing a Node from the HTML Body using getelementbyId-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<div id="test">
Hello this is the div
hi i am here
</div>
<p>I am still there</p>
<script>
//delete an element
document.getElementById("test").remove();
</script>
</body>
</html>
Output
Code for removing many elements(paragraph elements) from within a parent using Javascript
<!--Removing many elements from within a parent-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<div id="test">
This is some text inside the div
<p>this is sentence1</p>
<p>this is sentence2</p>
<p>this is sentence3</p>
<p>this is sentence4</p>
<p>this is sentence5</p>
<p>this is sentence6</p>
<p>this is sentence7</p>
<p>this is sentence8</p>
</div>
<p>I am still there</p>
<script>
//delete all elements of type paragraph from within div
const k=document.getElementById("test");
if(k.hasChildNodes)
{
const ch = k.childNodes;
for(let i of ch)
{
if(i.nodeName.localeCompare('P')==0)
{
i.remove();
}
}
}
</script>
</body>
</html>
Output
Code for Replacing an existing paragraph element with a new heading element
<!--Replacing a paragraph with a heading-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<div id="test">
<p id="e">I am already there</p>
</div>
<script>
const new_element = document.createElement("h1");
const element_text = document.createTextNode("This is a Heading");
new_element.append(element_text);
const par = document.getElementById("test");
const existing_element = document.getElementById("e");
par.replaceChild(new_element,existing_element);
</script>
</body>
</html>
Output
Creating text box using JavaScript and adding it to an HTML page
<!--Creating text boxes using Javascript-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<label for="username">Enter your username</label>
<input type="text" required name="username" id="username">
<input type="button" name="addbox" id="addox" value="add" onclick="add()">
<script>
function add()
{
const new_label = document.createElement("label");
new_label.textContent="Enter your username";
const new_textbox = document.createElement("input");
new_textbox.setAttribute("type","text");
const bre = document.createElement("br");
const bre1 = document.createElement("br");
document.body.appendChild(bre);
document.body.appendChild(bre1);
document.body.appendChild(new_label);
document.body.appendChild(new_textbox);
}
</script>
</body>
</html>
Output
