JavaScript

JavaScript Code Examples

The following section provides several JavaScript Code Examples.

addEventListener()

Sometimes we want to attach an event listener to an HTML element dynamically. For this purpose, we can use the addEventListener() method. Even, it is possible to attach an event listener to a paragraph or div element. See Example.

appendChild()

Basically, this method helps us to append a child HTML element to an existing element. Hence, we can create an HTML document dynamically by using this method. Further, the child node element added in this way is the last child node. See Example.

click()

Whenever we want t to simulate a mouse click using the code, we can use this method. In fact, this method is very useful when it is required to click a button on the occurrence of certain conditions like when timeout happens. See Example.

compareDocumentPosition()

Basically, we use this function to know the relative position of two HTML elements. Specifically, it determines whether an HTML element is placed before or after, or inside a given HTML element. See Example.

getAttribute()

In order to find the value of a particular attribute of an element, we use this function. Specifically, provide a particular attribute such as class as a parameter to this method. In return, we get the value of that attribute. See Example.

getElementsByClassName()

In fact, we can determine all the elements on a web page that use a specific CSS class. Basically, this method returns a collection of HTML elements that use the specified CSS class. See Example.

getElementsByTagName()

Another method that returns a collection of HTML elements is getElementsByTagName(). Here we provide the name of a tag as a parameter. In turn, the method returns the collection of all elements that use the specified tag. See Example.

hasAttribute()

Basically, it returns a boolean value indicating whether the HTML element has the given attribute. For instance, suppose we want to determine whether an <img> element has alt attribute specified. In such a case, we can use this method. See Example.

hasAttributes()

Likewise, hasAttributes() method determines whether an element has an attribute defined or not. See Example.

insertAdjacentElement()

Whenever we need to insert another HTML element at a position relative to the given element, we can use this method. For instance, we can insert an element before and after the beginning, or before and after the end of the given HTML element. See Example.

insertAdjacentHTML()

In a similar way, we can insert the HTML text adjacent to a given element. See Example.

insertAdjacentText()

Similarly, the insertAdjacentText() method inserts a text adjacent to the given HTML element. See Example.

insertBefore()

For the purpose of inserting a child node before a specific node, we can use this method. For instance, suppose we want to add a bulleted item as the first item in the list. In such a case, we can use this method. See Example.

querySelector()

This method takes a CSS selector as a parameter and returns the first element having that selector. Although, more than one element may be using that selector, but it returns the first one. See Example.

querySelectorAll()

In the same way, the querySelectorAll() method returns all the elements that define the specified selector. See Example.

remove()

In order to remove an element we can use this method. Meanwhile, we can retrieve the element by using getElementById() method. Once, we retrieve it, we apply the remove() method to remove it from the Document Object Model (DOM). See Example.

removeAttribute()

In fact, we can also remove an attribute from an element dynamically. For instance, suppose we want to disable a button click on the occurrence of a certain condition. In such a case, we can use this method. See Example.

removeChild()

Similarly, it is possible to remove an element dynamically. For example, suppose we want to delete an item from a list when certain event occurs, then we can use this method. See Example.

replaceChild()

In order to replace an element with another element, we can use the replaceChild() method. For example, we can display a paragraph whenever the user moves the mouse curser on a list item. See Example.

scrollIntoView()

While we use this method so that the element with a particular id is scrolled into the visible area of browser window. It is also possible to scroll it to align on top or bottom of the scrollable area. See Example.

setAttribute()

In order to provide a value to a specific attribute of an element, we can use this method. For instance, we can increase or decrease the dimensions of an image by using the code. See Example.

setAttributeNode()

For the purpose of dynamically adding an attribute node to a specific HTML element, we can use this method. For example, we can create a node with a given CSS class. Later, we can add this node to an HTML element. See Example.

Basic JavaScript Code Examples

In order to find simple JavaScript Code Examples, click here.


Related Topics

Evolution of JavaScript from ES1 to ES2020

Understanding Document Object Model (DOM) in JavaScript

Introduction to Programming in TypeScript

Creating Classes in TypeScript

Working with Arrays in TypeScript

Significance of Tuples in TypeScript

Explaining Interfaces in TypeScript with Examples

How to Create and Use Arrow Functions in TypeScript

Understanding JSON Web Tokens

Java Practice Exercise

Introduction to HTML DOM Methods in JavaScript

Changing Style of HTML Elements using getElementsByClassName() Method

Show or Hide TextBox when Selection Changed in JavaScript

Callback Functions in JavaScript

JavaScript Code for Event Handling

Leave a Reply

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