Modifying elements

Here's an overview of the most important properties and methods for modifying elements in the DOM:

Properties for Modifying Elements

element.innerHTML - Sets or gets the HTML content within an element.
element.innerText - Sets or gets the text content within an element, ignoring any HTML tags.
element.value - Sets or gets the value of a form element, such as an input or textarea.
element.src - Sets or gets the source URL of an image or other media element.
element.href - Sets or gets the destination URL of a link element.
element.style - Provides access to the inline style properties of an element.
element.className - Sets or gets the class attribute of an element.

Methods for Modifying Elements

document.createElement(tagName) - Creates a new element with the specified tag name.
element.appendChild(newNode) - Adds a new child node to the end of an element.
element.insertBefore(newNode, referenceNode) - Inserts a new child node before a specified reference node within an element.
element.removeChild(childNode) - Removes a child node from an element.
element.replaceChild(newNode, oldNode) - Replaces a child node with a new node within an element.
element.setAttribute(attributeName, attributeValue) - Sets or updates the value of a specified attribute on an element.
element.removeAttribute(attributeName) - Removes a specified attribute from an element.

Examples

Let's see some examples of how these properties and methods can be used to modify elements in the DOM:

Modifying HTML content with innerHTML

<div id="myDiv">Hello, world!</div>

const div = document.querySelector('#myDiv');
div.innerHTML = 'Goodbye, world!'; // Changes the HTML content of the div

Modifying text content with innerText

<p id="myPara">This is a paragraph with <b>bold text</b>.</p>

const para = document.querySelector('#myPara');
para.innerText = 'This is a new paragraph without any formatting.'; // Changes the text content of the paragraph

Modifying a form element value with value

<input type="text" id="myInput" value="Hello, world!">

const input = document.querySelector('#myInput');
input.value = 'Goodbye, world!'; // Changes the value of the input element

Modifying an image source with src

htmlCopy code<img id="myImg" src="my-image.jpg" alt="My Image">

const img = document.querySelector('#myImg');
img.src = 'new-image.jpg'; // Changes the source URL of the image element

Modifying a link destination with href

<a id="myLink" href="http://www.example.com">My Link</a>

const link = document.querySelector('#myLink');
link.href = 'http://www.google.com'; // Changes the destination URL of the link element

Modifying inline styles with style

<div id="myDiv" style="background-color: red; color: white;">Hello, world!</div>

const div = document.querySelector('#myDiv');
div.style.backgroundColor = 'blue'; // Changes the background color of the div element
div.style.color = 'black'; // Changes the text color of the div element

Modifying classes with className

element.className: returns a string containing the value of the class attribute of an element
element.className = "class-name": sets the class attribute of an element to a new value

Example:

<div class="box">Some content here</div>

const box = document.querySelector(".box");
console.log(box.className); // outputs "box"
box.className = "container"; // changes class to "container"

Modifying classes with classList

element.classList: returns a list of the classes of an element
element.classList.add("class-name"): adds a class to an element
element.classList.remove("class-name"): removes a class from an element
element.classList.toggle("class-name"): toggles a class on and off for an element
element.classList.contains("class-name"): checks if an element has a particular class

Example:

<div class="box">Some content here</div>

const box = document.querySelector(".box");
console.log(box.classList); // outputs ["box"]
box.classList.add("highlight"); // adds "highlight" class
box.classList.remove("box"); // removes "box" class
console.log(box.classList.contains("highlight")); // outputs true
box.classList.toggle("highlight"); // toggles "highlight" class off

Modifying styles with style

element.style.property = "value": sets a style property for an element

Example:

<div class="box" style="background-color: blue;">Some content here</div>

const box = document.querySelector(".box");
box.style.backgroundColor = "red"; // changes background color to red

modifying elements using methods

setAttribute(): This method is used to set the value of a specified attribute of an element. The syntax is:
```
element.setAttribute(attributeName, attributeValue);
```
For example, to set the src attribute of an image element, you could use:
```
let myImg = document.getElementById("myImage");
myImg.setAttribute("src", "new-image.jpg");
```

appendChild(): This method is used to add a new child node to an element. The syntax is:

parentElement.appendChild(newChild);

For example, to add a new paragraph element to a div element, you could use:

let myDiv = document.getElementById("myDiv");
let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
myDiv.appendChild(newParagraph);

removeChild(): This method is used to remove a child node from an element. The syntax is:

parentElement.removeChild(childElement);

For example, to remove a paragraph element from a div element, you could use:

let myDiv = document.getElementById("myDiv");
let paragraphToRemove = document.getElementById("myParagraph");
myDiv.removeChild(paragraphToRemove);

replaceChild(): This method is used to replace a child node with a new node. The syntax is:

parentElement.replaceChild(newChild, oldChild);

For example, to replace a paragraph element with a new h1 element, you could use:

let myDiv = document.getElementById("myDiv");
let oldParagraph = document.getElementById("myParagraph");
let newHeading = document.createElement("h1");
newHeading.textContent = "This is a new heading.";
myDiv.replaceChild(newHeading, oldParagraph);

More methods for modify attributes

element.getAttribute("attribute-name"): returns the value of an attribute for an element
element.setAttribute("attribute-name", "value"): sets the value of an attribute for an element
element.hasAttribute("attribute-name"): checks if an element has a particular attribute
element.removeAttribute("attribute-name"): removes an attribute from an element

Example:

<a href="#" id="my-link">Click me</a>

const link = document.querySelector("#my-link");
console.log(link.getAttribute("href")); // outputs "#"
link.setAttribute("href", "https://www.google.com"); // changes link to Google
console.log(link.hasAttribute("target")); // outputs false
link.setAttribute("target", "_blank"); // adds target attribute
link.removeAttribute("id"); // removes id attribute

PreviousAccessing Elements NextAdding and Removing Elements

Last updated 2 years ago