It involves manipulating various elements, such as text, images, styles, and HTML structure, to modify the displayed content based on user interactions, events, or specific conditions. By leveraging JavaScript's DOM (Document Object Model) manipulation capabilities, developers can create interactive and responsive websites by adding, removing, or altering content elements in real-time. This allows for a more engaging and customized user experience, enabling dynamic updates without requiring a full page refresh.

Examples include explanations using different methods for element selection:, such as :

Updating Text Content

Step 1 : Identify the target element where you want to update the text content. You can use the getElementById, getElementsByClassName, or querySelector methods to select the element.
Step 2: Use the textContent property to modify the text content of the selected element.

Using getElementById


<!DOCTYPE html>
<html>
<body>
  <p id="myElement">Original Text</p>

  <script>
    let element = document.getElementById('myElement');
    element.textContent = 'New Text Content';
  </script>
</body>
</html>

In this example, the element is selected using its unique id "myElement" with getElementById, and its text content is updated.

Using getElementsByClassName


<!DOCTYPE html>
<html>
<body>
  <p class="myElement">Original Text</p>

  <script>
    let elements = document.getElementsByClassName('myElement');
    let element = elements[0];
    element.textContent = 'New Text Content';
  </script>
</body>
</html>

In this example, the element is selected using its class name "myElement" with getElementsByClassName, which returns a collection of elements. We access the first element in the collection and update its text content.

Using querySelector


<!DOCTYPE html>
<html>
<body>
  <p id="myElement">Original Text</p>

  <script>
    let element = document.querySelector('#myElement');
    element.textContent = 'New Text Content';
  </script>
</body>
</html>

In this example, the element is selected using the CSS selector "#myElement" with querySelector, which targets the element with the id "myElement". The text content of the selected element is then updated.

Modifying HTML Structure

Using getElementById


<!DOCTYPE html>
<html>
<body>
  <div id="parentElement">
    <p>Existing Content</p>
  </div>

  <script>
    let parentElement = document.getElementById('parentElement');
    let newElement = document.createElement('div');
    newElement.textContent = 'New Element';
    parentElement.appendChild(newElement);
  </script>
</body>
</html>

In this example, the parent element is selected using its id "parentElement" with getElementById. A new <div> element is created and its text content is set. The new element is then appended as a child to the parent element.

Using querySelector


<!DOCTYPE html>
<html>
<body>
  <div class="parentElement">
    <p>Existing Content</p>
  </div>

  <script>
    let parentElement = document.querySelector('.parentElement');
    let newElement = document.createElement('div');
    newElement.textContent = 'New Element';
    parentElement.appendChild(newElement);
  </script>
</body>
</html>

In this example, the parent element is selected using the CSS selector ".parentElement" with querySelector, which targets the element with the class "parentElement". The rest of the process is similar to the previous example.

Changing CSS Styles

Using getElementById


<!DOCTYPE html>
<html>
<body>
  <p id="myElement">Text Content</p>

  <script>
    let element = document.getElementById('myElement');
    element.style.color = 'red';
    element.style.fontSize = '20px';
  </script>
</body>
</html>

In this example, the element is selected using getElementById. The color style property of the element is set to ' red ', and the font size is set to '20px'.

Using querySelector


<!DOCTYPE html>
<html>
<body>
  <p class="myElement">Text Content</p>

  <script>
    let element = document.querySelector('.myElement');
    element.style.color = 'red';
    element.style.fontSize = '20px';
  </script>
</body>
</html>

In this example, the element is selected using the CSS selector ".myElement" with querySelector, which targets the element with the class "myElement". The rest of the process is similar to the previous example.

Adding and Removing Classes

Using getElementById


<!DOCTYPE html>
<html>
<body>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
  <p id="myElement">Text Content</p>

  <script>
    let element = document.getElementById('myElement');
    element.classList.add('highlight');
    element.classList.remove('highlight');
  </script>
</body>
</html>

In this example, the element is selected using getElementById. The class "highlight" is added to the element using classList.add, and then it is removed using classList.remove.

Using querySelector


<!DOCTYPE html>
<html>
<body>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
  <p class="myElement">Text Content</p>

  <script>
    let element = document.querySelector('.myElement');
    element.classList.add('highlight');
    element.classList.remove('highlight');
  </script>
</body>
</html>

In this example, the element is selected using the CSS selector ".myElement" with querySelector. The rest of the process is similar to the previous example.

Responding to User Events

Using : getElementById


<!DOCTYPE html>
<html>
<body>
  <button id="myButton">Click Me</button>
  <p id="myElement">Original Text</p>

  <script>
    let button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      let element = document.getElementById('myElement');
      element.textContent = 'Button Clicked!';
    });
  </script>
</body>
</html>

In this example, the button and paragraph elements are selected using getElementById. An event listener is added to the button to listen for a click event. When clicked, the text content of the paragraph element is updated.

Using querySelector


<!DOCTYPE html>
<html>
<body>
  <button class="myButton">Click Me</button>
  <p class="myElement">Original Text</p>

  <script>
    let button = document.querySelector('.myButton');
    button.addEventListener('click', function() {
      let element = document.querySelector('.myElement');
      element.textContent = 'Button Clicked!';
    });
  </script>
</body>
</html>

In this example, the button and paragraph elements are selected using the CSS selectors ".myButton" and ".myElement" with querySelector. The rest of the process is similar to the previous example.

By utilizing different methods for element selection (getElementById, getElementsByClassName, and querySelector), you can target specific elements using their ids, class names, or CSS selectors for content modification.

Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor