DOM Manipulation in JavaScript 2: A Beginner’s Guide to Interacting with Web Pages Dynamically

3 min readOct 22, 2023

In the earlier blog, we just discussed on how to select any element or set of elements using the predefined selector methods by providing factors like tag name, class, id, etc. as parameter. Today, we will be more deep diving into the subject and manipulate the HTML elements more.

Let’s take a simple example of a web page with code like this:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Document Object Model</title>
    </head>
    <body>
     <h1 class='title' id='first-title'>First Title</h1>
     <h1 class='title' id='second-title'>Second Title</h1>
     <h1 class='title' id='third-title'>Third Title</h1>
     <h1></h1>
     <div class="para">
      <p> Some text </p>
      <input type ="text" value="Hello">
      </div>
    </body>
  </html>

Modifying the element content

1. Get or set inner HTML content

let title = document.querySelector('.first-title')
console.log(title.innerHTML)
title.innerHTML = '<span>Nested Heading </span>'

The innerHTML attribute of the element is used to modify and get the inner HTML content inside it.

2. Get or set text Content

let title = document.querySelector('.first-title')
console.log(title.textContent)
title.innerHTML = 'Modified Heading'

The textContent attribute of the element is used to modify and get the textContent inside it.

3. Get or set value of an input element

let userInput  = document.querySelector('input')
console.log(userInput.value)
userInput.value = "Hi!"

The value attribute of the input element is used to modify and get the value inside it.

Modifying Element Attributes and Properties

1. Get the value of the attribute

// syntax
element.getAttribute('attributeName')

let userInput  = document.querySelector('input')
let value  = userInput.getAttribute('value')
console.log(value)

The getAttribute() takes the name of the attribute as input and returns the value of the attribute.

2. Set the value of the attribute

// syntax
element.getAttribute('attributeName','value')

let userInput  = document.querySelector('input')
userInput.setAttribute('value','Hi')

let value  = userInput.getAttribute('value')
console.log(value)

The setAttribute() takes the name of the attribute and its value as inputs and returns the value of the attribute.

3. Get or set the value of the attribute directly

let userInput  = document.querySelector('input')
userInput.className = "userInput" // setting the value
userInput.id  = 'greeting'

console.log(userInput.id) // getting the value

We can directly call the attributes on the element to get or set the value of the attribute.

Modifying Styles of The Element

// syntax
element.style.propertyName = value

//code
const titles = document.querySelectorAll('h1')
titles.forEach((title, i) => {
  title.style.fontSize = '24px' // all titles will have 24px font size
  if (i % 2 === 0) {
    title.style.color = 'green'
  } else {
    title.style.color = 'red'
  }
})

Here, we select all the titles from the web page and loop through each of them. While looping, we set the size of the font of the titles to 24px and if the title is on even count, its color will be green. Otherwise, it will be red.

Creating, Appending and Removing Elements

1. Creating Elements

// syntax
document.createElement('tagName')

//code 
let title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = 'DOM Day 2'

We use document.createElement(‘tagName’) to create a new element and assign it to a variable. We can then modify and set its styles and attributes using the methods discussed above. You can use for loop to create multiple elements at the same time.

2. Appending the Element

// syntax
element.appendChild(childElement)

// code
document.appendChild(title)

We use element.appendChild(childElement) to append the created child element inside a parent element. Here, we appended the created title element inside the body directly. Let’s see how we can append the element inside the other element:

// creating the child element
let para= document.createElement('p')
title.style.fontSize = '18px'
title.textContent = 'Some Text'

// selecting the parent element
let div  = document.querySelector(".para")

// appending the child element
div.appendChild(para)

3. Removing the Element

// syntax
element.removeChild(element)

// code

// selecting the parent element
let div  = document.querySelector(".para")

// selecting the child element
let para  = document.querySelector(".para p")

// removing the child element
div.removeChild(para)

Today we learned a lot more about the DOM Manipulation, which is basically enough for doing the minimal and small projects. Hope you learned something new.