June 10, 2021

Programmingempire

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 an 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, 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 a 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 cursor 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 the browser window. It is also possible to scroll it to align on the 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.