Your Course Progress

Topics
0 / 0
0.00%
Practice Tests
0 / 0
0.00%
Tests
0 / 0
0.00%
Assignments
0 / 0
0.00%
Content
0 / 0
0.00%
% Completed

DOM Manipulation

Introduction to DOM Manipulation

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page as a tree-like structure, where each node is an object representing an element, attribute, or text.

DOM Manipulation

Introduction to DOM Manipulation

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page as a tree-like structure, where each node is an object representing an element, attribute, or text.

DOM manipulation is the process of changing the content, structure, and style of a document using JavaScript. It allows developers to create interactive and responsive web applications.

Changing Text Content

To change the text content of an element, use the textContent property.

const heading = document.getElementById('myHeading');
    heading.textContent = 'New Heading Text'; // Changes the text of the heading

This example changes the text content of the element with the ID myHeading to "New Heading Text".

Changing HTML Content

To modify the HTML content of an element, use the innerHTML property.

const div = document.getElementById('myDiv');
    div.innerHTML = '<p>This is a new paragraph.</p>'; // Replaces the content with new HTML

This example replaces the existing content of the element with the ID myDiv with a new paragraph.

Adding New HTML Elements

To create new HTML elements, use the createElement() method. To append an element to the DOM, use the appendChild() method.

const newDiv = document.createElement('div');
    newDiv.innerHTML = '<h2>This is a new heading</h2><p>This is a new paragraph added to the div.</p>';
    document.getElementById('container').appendChild(newDiv); // Appends the new div

This example creates a new div element with specified content and appends it to the element with the ID container.

Changing Element Attributes

To modify the attributes of an element, use the setAttribute() method.

const link = document.getElementById('myLink');
    link.setAttribute('href', 'https://www.example.com'); // Changes the href attribute

This example changes the href attribute of the anchor element with the ID myLink.

Creating and Inserting New Elements

To create and insert new elements, follow these steps:

  1. Create a new element using createElement().
  2. Set the content of the new element using textContent or innerHTML.
  3. Append the new element to the DOM using appendChild().
const newParagraph = document.createElement('p');
    newParagraph.textContent = 'This is a newly added paragraph.';
    document.body.appendChild(newParagraph); // Appends the new paragraph to the body

This example creates a new paragraph element with specified content and appends it to the body of the document.

Summary

  • DOM manipulation allows you to dynamically change the content, structure, and style of a document.
  • Use textContent to change text content, innerHTML to modify HTML content, and setAttribute() to change element attributes.
  • To add new elements, use createElement() and appendChild().

Discussion