Add and Delete Nodes from HTML page using JavaScript

arp14 HTML, JavaScript, Tutorial Tags: , , , , , , 1

Almost in every dynamic pages, we always need to add and delete nodes / elements / tags. This tutorial is about how to do that
using JavaScript. So, you need to have a minimum knowledge on HTML and JavaScript. I you don’t, please check the tutorials
on HTML and JavaScript before we start. It will be done by appendChild and removeChild function of JavaScript.

Required files:

  • add and delete nodes.html
  • add and delete nodes.js
Explanation:

The HTML markup is very simple, I think no need to explain that.
In the script below, we’re using basically very common two events : onsubmit and onclick. After writing some text in the textarea
and submitting the form, we’ll add node. And, on clicking “delete last paragraph” link, we’ll delete the last inserted p tag from the
document. I guess, you got the idea.

On window.onload event, we’re calling two functions – addNode and removeNode on respectively onsubmit and onclick event.

In the definition of addNode function, we’re getting the raw text from the text area then creating a text node using that raw text.
Then creating a element with p tag and then appending that text node using JavaScript’s inbuilt function appendChild function.
And at last returning false to preventing default of onsubmit event.

In the definition of removeNode function, we’re getting all p tags at first and then extracting the last one. Then removing that p
tag using JavaScript’s inbuilt function removeChild. Then at last – returning false to prevent default of onclick event.

add and delete nodes.html
<html>
	<head>
		<title>Add and Delete Nodes from HTML page using JavaScript</title>
		<script type ="text/javascript" src="add & delete nodes.js" ></script>
	</head>

	<body>
		<form action="#" id="form1">
			<textarea id="textField"></textarea><br />
			<input type="submit" name="submit" value="Add text to the page"/>
		</form>
		<a href="#" id="delete" >Delete last paragraph</a>
	</body>
</html>
add and delete nodes.js
window.onload = function () {
	document.getElementsByTagName("form")[0].onsubmit = addNode;
	document.getElementById("delete").onclick = removeNode;
}

function addNode () {
	var rawText = document.getElementById("textField").value;
	var textNode = 	document.createTextNode(rawText);
	var pTag = document.createElement("p");

	pTag.appendChild(textNode);

	var docBody = document.getElementsByTagName("body")[0];
	docBody.appendChild(pTag);

	return false;
}

function removeNode() {
	var allPtags = document.getElementsByTagName("p");
	var lastParagraph = allPtags.item(allPtags.length-1);
	document.getElementsByTagName("body")[0].removeChild(lastParagraph);
	return false;
}

You can download all correspondence files from here

Having problem? Just comment below, Thanks.

One thought on “Add and Delete Nodes from HTML page using JavaScript

Leave a Reply

Note: Your email address will not be published. Required fields are marked *