JavaScript, nowadays, is the base of Front End Development. Web application without JavaScript is a myth. Going back to the history of it, JavaScript was created by Brendan Eich at Netscape in September 1995. In November 1996 Netscape submitted JavaScript to carve out standard specification to Ecma International which led to the official release of the language specification ECMAScript. To know more about JavaScript Events, you first need to build basic knowledge of HTML tags and attributes. I suggest you go through the following link for a quick idea on HTML before you proceed for JavaScript Class.

Loading JavaScript with HTML

The first question that comes to our mind is, how to include JavaScript to our web page. There are basically two ways to do so:
1. By Adding JavaScript directly in the script tag. For example: –

If you could see, an alert will show up [object HTMLCollection] which is actually an array containing the HTML element/elements.

2. By writing your JavaScript code in a separate file with ‘.js’ extension and then including the file in head tag in HTML file. For Example: –

<html>
<head>
<title>Learning JavaScript</title>
<script type="text/javascript" src=”source.js”></script>
</head>
<body>
<div id="firstDiv">
<h1>Hello!!</h1>
</div>
</body>
</html>

JavaScript Events

document

‘document’ in JavaScript is an object that represents the web page. You can access any element in a webpage by using document object. For example: –

  • document.getElementById(id) will find the element by its id.
  • document.getElementsByClassName(classname) will find the elements with same classname.
  • document.getElementsByTagName(tag) will find the elements with same tag.
  • Creating & Appending Element Using JavaScript

Now the question is how can we create HTML elements using JavaScript. This can be done by using JavaScripts createElement function. For example: –
Let us say that we want to create an element ‘h1’ and append it in the ‘div’ with id “outerDiv”.
So this will be done as follows,

var element= document.createElement("h1");
var appendToElement= document.getElementById("outerDiv");
element.innerHTML="Hello World!";
appendToElement.appendChild(element);

 

Removing or Replace Elements using JavaScript

After creating an element and appending it to wherever we want, now the question is how can we remove or replace an element from the web page using JavaScript.

Removing an Element

This can be done by using the JavaScript function removeChild. Let us see how this function is used. First, we need to find the element that we want to remove from our DOM. Finding the element can be done either by using their id, class name or by their tag. The best way is to use id as it is unique.
So let us try and understand this with an example.
var elementToBeRemoved= document.getElementById(“remove”);
Now the second step is to find the parent element of the element to be removed.
var parentElement= document.getElementById(“outerDiv”);
After finding out the parent element, we use the removeChild function over the parent and pass the element to be deleted as the argument to this function.
parentElement.removeChild(elementToBeRemoved);

 

Replace an Element

We will now discuss how to replace an element in DOM. It is a bit different than removing a child element. Here, we need the element to be replaced, the element to be replaced with and the parent element. So, first, we will find out the element to be replaced.
var elementToBeReplaced= document.getElementById(“replace”);
Then, the element to be replaced with.
var newElement= document.createElement(“h1”);
It’s not just the element to be replaced with but what should be the content in that element. In our example, we are keeping the same content but in the element to be replaced with.
newElement.innerHTML= elementToBeReplaced.innerHTML;
Now, it turns to find out the parent element of the element to be replaced.
var parentElement= document.getElementById(“outerDiv”);

 

We pass two parameters to the replaceChild function, first is the new element and the other is the element which is to be replaced.
parentElement.replaceChild(newElement, elementToBeReplaced);

 

In this article, you have seen how we have played with the HTML DOM elements. In our next article, we will introduce you to handling events and changing the style of HTML elements using JavaScript. Stay tuned for more!

Leave a Reply

%d bloggers like this: