JavaScript DOM examples

Creating an element
Appending an element
Removing an element
Changing an element’s text content
Changing an element’s HTML content
Modifying an element’s attributes
Accessing an element’s attributes
Adding an event listener to an element
Removing an event listener from an element
Traversing the DOM

JavaScript DOM Examples

Creating an element

const newElement = document.createElement(‘div’);

This code creates a new div element in the DOM. It does not yet exist in the HTML document, but can be manipulated before being added to the document.

Appending an element

const parentElement = document.querySelector(‘#parent’);

parentElement.appendChild(newElement);

This code appends the newElement to the parentElement in the DOM. It adds the newElement as the last child of the parentElement.

Removing an element

const childElement = document.querySelector(‘#child’);

childElement.parentNode.removeChild(childElement);

This code removes the childElement from the DOM. It first selects the parent node of childElement with parentNode, then uses removeChild to remove childElement from the parent node.

Changing an element’s text content

const element = document.querySelector(‘#element’);

element.textContent = ‘New text’;

This code changes the text content of element to ‘New text’. It sets the textContent property of the element to the new string value.

Changing an element’s HTML content

const element = document.querySelector(‘#element’);

element.innerHTML = ‘<p>New HTML</p>’;

This code changes the HTML content of element to ‘<p>New HTML</p>’. It sets the innerHTML property of the element to the new string value. Note that this can be a security risk if the HTML content comes from an untrusted source.

Modifying an element’s attributes

const element = document.querySelector(‘#element’);

element.setAttribute(‘class’, ‘new-class’);

This code modifies the class attribute of element to ‘new-class’. It uses the setAttribute method to set the attribute value to the new string value.

Accessing an element’s attributes

const element = document.querySelector(‘#element’);

const className = element.getAttribute(‘class’);

This code retrieves the value of the class attribute of element and stores it in the className variable. It uses the getAttribute method to retrieve the attribute value.

Adding an event listener to an element

const button = document.querySelector(‘#button’);

button.addEventListener(‘click’, handleClick);

function handleClick() {

  console.log(‘Button clicked’);

}

This code adds an event listener to the button element that listens for the ‘click’ event and calls the handleClick function when the event occurs. The handleClick function logs a message to the console.

Removing an event listener from an element

const button = document.querySelector(‘#button’);

button.removeEventListener(‘click’, handleClick);

function handleClick() {

  console.log(‘Button clicked’);

}

This code removes the event listener from the button element that was added in the previous example. It uses the removeEventListener method to remove the listener function.

Traversing the DOM

<div id=”parent”>

  <div id=”child”>

    <div id=”grandchild”></div>

  </div>

</div>

const grandchild = document.querySelector(‘#grandchild’);

const parent = grandchild.parentNode;

const child = grandchild.parentNode.previousElementSibling;

This code traverses the DOM from the grandchild element to select the parent and child elements. It first selects the parent node of grandchild with parentNode. It then selects the previousElementSibling of the