Web_Dev_Grad

Manipulating the DOM

How to Manipulate the DOM

The main way that you will edit the HTML content of your webpage using JavaScript is, in it's simplest terms, a two-step process.

  1. Define a variable as an element on the page by targeting it. Such as let variableOne = document.getElementById('element-id');
  2. Decide what part of it to change and assign it a new value. Such as variableOne.innerHTML = '<p>New paragraph</p>' or variableOne.value = 5;

HTML Properties

Here are some useful element properties that you may want to target.

Property What is returned/targeted
tagName A string representing the element tag (p, div, h1, etc)
id Values of the ID as a string
className Value of the class as a string
classList List of the classes in the class attribute as an array-like structure
attributes A NamedNodeMap of all the elements attributes and their values (can be iterated through)
clientHeight Number representing inner height of the element (read only)
clientWidth Number representing inner width of the element (read only)
innerHTML Content inside the element including HTML markup
outerHTML Same as innerHTML but includes the element as well
textContent Inner text content
style The style attribute of the element. This can be further specified using e.g. style.width or style.backgroundColor etc.
hidden Can set to true to hide the element or false to show it

Updating HTML

Syntax Action
  1. Assign your element to a variable
  2. Using backticks, assign your new content to a different variable
    let html = `<h1>Hello!</h1>`;
  3. Set the innerHTML of your element variable to this new content variable
    myELement.innerHTML = html;
Changing HTML content.
myElement.id = 'id name'; Assign an ID to a new element.
myElement.setAttribute('class', 'className'); Adds a class to an element.
myElement.classList.add('className'); Add another class to an element without overwriting previous ones.
myElement.innerHTML; Assign HTML content to a new element.
document.body.appendChild(myElement); Appends the new element into the body as a child.

To dynamically create and add a new element to the page, follow these four steps:

  1. Create the element using document.createElement()
  2. Customise the new element using the above properties
  3. Target the existing element you want to be its parent element
  4. Append your new element to the parent element using .appendChild()
// Create a new element
let newElement = document.createElement('h1');
// Customise the new element
newElement.innerText = 'Heading One';
newElement.style.color = 'blue';
// Target the element you want to be the parent element
let parentElement = document.body;
// Append the new element
parentElement.appendChild(newElement);

// In some cases you may want to make a copy of an existing element
// Makes a copy of the targeted element
.cloneNode()
// Makes a copy of the targeted element including all children
.cloneNode(true)
// If you want to delete an element from the DOM the method is
.remove()
// To delete a specific child of a parent, target the parent and child as separate variables then do
parentElement.removeChild(childElement);