Modifying elements

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

Properties for Modifying Elements

1. element.innerHTML - Sets or gets the HTML content within an element.

2. element.innerText - Sets or gets the text content within an element, ignoring any HTML tags.

3. element.value - Sets or gets the value of a form element, such as an input or textarea.

4. element.src - Sets or gets the source URL of an image or other media element.

5. element.href - Sets or gets the destination URL of a link element.

6. element.style - Provides access to the inline style properties of an element.

7. element.className - Sets or gets the class attribute of an element.

Methods for Modifying Elements

1. document.createElement(tagName) - Creates a new element with the specified tag name.

2. element.appendChild(newNode) - Adds a new child node to the end of an element.

3. element.insertBefore(newNode, referenceNode) - Inserts a new child node before a specified reference node within an element.

4. element.removeChild(childNode) - Removes a child node from an element.

5. element.replaceChild(newNode, oldNode) - Replaces a child node with a new node within an element.

6. element.setAttribute(attributeName, attributeValue) - Sets or updates the value of a specified attribute on an element.

7. 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

1. 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");

2. 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);

3. 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);

4. 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);

5. 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