HTML Document Object Model (DOM) provides us with a series of methods and properties that allow us to change or update HTML Elements in the webpage using JavaScript.
In this lesson, we will learn about those methods and properties. They are as follows:
- innerHTML property
- innerText property
- element.attributes property
- element.getAttribute property
- element.setAttribute property
- element.removeAttribute property
Note: Also check out our JavaScript 👉 Find and Select DOM Elements lesson.
The JavaScript innerHTML property 👇
The innerHTML property helps us to set or get the HTML content of an element. In other words, using the innerHTML property, one can get the inner HTML content of the selected element and can also set it.
It returns the inner HTML content of the selected element.
Note: The innerHTML property returns all the inner HTML content including: Texts, Inner HTML Tags, etc.
Syntax
element.innerHTML
Example: Get HTML Content 🔎
<!DOCTYPE html>
<html>
<head>
<title>InnerHTML</title>
</head>
<body>
<h2 id="heading">Top Tech Companies</h2>
<ul id="list">
<li>Apple</li>
<li>Google</li>
<li>Microsoft</li>
<li>Meta</li>
<li>Amazon</li>
</ul>
<p id="statement">
Among these, we use <strong>Google</strong> products the most.
</p>
<script>
// Get InnerHTML of element having ID of "heading".
let heading = document.getElementById("heading").innerHTML;
console.log(heading);
// Displays not only the content but the entire innerHTML of the "ul" element having ID of "list".
let lists = document.getElementById("list").innerHTML;
console.log(lists);
console.log(document.getElementById("statement").innerHTML);
</script>
</body>
</html>
Output
Example: Set HTML Content ✏
<!DOCTYPE html>
<html>
<head>
<title>InnerHTML</title>
</head>
<body>
<h2 id="heading">Top Tech Companies</h2>
<ul id="list">
<li>Javascript</li>
<li>Python</li>
</ul>
<script>
// Set or Change the innerHTML of the element having ID of "heading" from "Top Tech Companies" to "Favorite Programming Languages".
let heading = document.getElementById("heading");
heading.innerHTML = "Favorite Programming Languages";
// We can also add new innerHTML by using the Addition Assignment Operator "+=".
const list = document.getElementById("list");
list.innerHTML += "<li>C</li> <li>C++</li> <li>Go</li>";
// Display the updated list element.
console.log(list);
</script>
</body>
</html>
Output
The JavaScript innerText property 🔡
The innerText property helps us to set or get the Text content of an element. In other words, using the innerText property, one can get the inner Text content of the selected element and can also set it.
Note: The innerText property returns only the inner Text content without including: Spaces, Inner HTML Tags, etc.
Syntax
element.innerText
Example: Get Text Content 🔎
<!DOCTYPE html>
<html>
<head>
<title>InnerText</title>
</head>
<body>
<h2 id="heading">Top Tech Companies</h2>
<ul id="list">
<li>Apple</li>
<li>Google</li>
<li>Microsoft</li>
<li>Meta</li>
<li>Amazon</li>
</ul>
<p id="statement">
Among these, we use <strong>Google</strong> products the most.
</p>
<script>
// Get Inner Text content of the element having ID of "heading".
let heading = document.getElementById("heading").innerText;
console.log(heading);
// Displays only the text content without including spaces or inner HTML Tags of the "ul" element having ID of "list".
let lists = document.getElementById("list");
console.log(lists.innerText);
console.log(document.getElementById("statement").innerText);
</script>
</body>
</html>
Output
Example: Set Text Content ✏
<!DOCTYPE html>
<html>
<head>
<title>InnerHTML</title>
</head>
<body>
<h2 id="heading">Top Tech Companies</h2>
<ul id="list">
<li>Javascript</li>
<li>Python</li>
</ul>
<script>
// Set or Change the inner Text content of the element having ID of "heading" from "Top Tech Companies" to "Favorite Programming Languages".
let heading = document.getElementById("heading");
heading.innerText = "Favorite Programming Languages";
// We cannot add new HTML Tags using "innerText" If we did, they would just be treated as normal text.
const list = document.getElementById("list");
list.innerText += "<li>C</li> <li>C++</li> <li>Go</li>";
// Here, after using innerText, the "list" element changes from a series of "<li>" tags to just normal text.
console.log(list);
</script>
</body>
</html>
Output
The JavaScript element.attributes property 💅
The element.attributes property returns an array-like collection of the selected element’s attributes. The array-like collection is called a NamedNodeMap.
Note: The NamedNodeMap returns a list of Attribute Objects. It also has a length property allowing us to find out how many attributes are present in the selected element.
Syntax
element.attributes
Returns
- A NamedNodeMap collection containing a list of attribute objects.
Example
<!DOCTYPE html>
<html>
<head>
<title>Element Attributes</title>
</head>
<body>
<input
type="text"
name="firstname"
placeholder="Enter First Name"
value="Alan"
/>
<input
type="text"
name="lastname"
placeholder="Enter Last Name"
value="Turing"
disabled
/>
<script>
const inputElements = document.getElementsByTagName("input");
// Extracting all the attributes of the first input element: "firstname".
let firstInputAttributes = inputElements[0].attributes;
// Extracting all the attributes of the second input element: "lastname".
let secondInputAttributes = inputElements[1].attributes;
// Displays a "NamedNodeMap{}" array-like collection of attributes.
console.log(firstInputAttributes);
console.log(`Number of attributes of first input: ${firstInputAttributes.length}`);
console.log(secondInputAttributes);
console.log(`Number of attributes of first input: ${secondInputAttributes.length}`);
</script>
</body>
</html>
Output
The JavaScript element.getAttribute() method ✨
The element.getAttribute() method returns the value of the selected attribute of an element.
Note: If the selected attribute does not exist on the element, then element.getAttribute() throws error.
Syntax
element.getAttribute(name)
Parameters
- name : It is required. It must contain the name of the attribute whose value we are getting.
Returns
- The value of the selected attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>Element Get Attribute</title>
<style>
.title {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h2 id="heading" class="title">Computer Scientist</h2>
<input
type="text"
name="name"
placeholder="Enter Full Name"
value="Alan Turing"
id="scientist"
/>
<script>
let title = document.getElementById("heading");
// Displays the value of the "class" attribute of element having ID of "heading".
console.log(`The Heading has a class attribute of: ${title.getAttribute("class")}`);
let scientist = document.getElementById("scientist");
// Displays the value of the "value" attribute of element having ID of "scientist".
console.log(`${scientist.getAttribute("value")} was one of the most beautiful and genius minds in computer science history.`);
</script>
</body>
</html>
Output
The JavaScript element.setAttribute() method 🌟
The element.setAttribute() method helps us to set a new value to the selected attribute of an element or create a new attribute and assign it a value.
In other words, if the selected attribute exists, the element.setAttribute() method overrides it’s current value with a new value.
If the selected attribute does not exist. then element.setAttribute() method creates that attribute and assigns a new value to it.
Syntax
element.setAttribute(name)
Parameters
- name : It is required. It must contain the name of the attribute which we are setting.
Example
<!DOCTYPE html>
<html>
<head>
<title>Element Set Attribute</title>
<style>
.title {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h2 id="heading">Computer Scientist</h2>
<input
type="text"
name="name"
placeholder="Enter Full Name"
value="Alan Turing"
id="scientist"
/>
<script>
let heading = document.getElementById("heading");
// Setting a new "class" attribute having the value of "title". This will apply the given CSS to our "heading" element.
heading.setAttribute("class", "title");
let input = document.getElementById("scientist");
// Overriding already present attribute of "input" element. Here, we changed the "value" attribute's value to "Tim Berners-Lee".
input.setAttribute("value", "Tim Berners-Lee");
// Setting a new attribute called "disabled" and giving it a value of "true".
input.setAttribute("disabled", "true");
// Displaying all the attributes that the elements now have.
console.log(heading.attributes);
console.log(input.attributes);
</script>
</body>
</html>
Output
The JavaScript element.removeAttribute() method 🗑
The element.removeAttribute() method removes the selected attribute from the given element.
Note: If the selected attribute does not exist on the element, then element.removeAttribute() does not do anything.
Syntax
element.removeAttribute(name)
Parameters
- name : It is required. It must contain the name of the attribute which we are removing.
Example
<!DOCTYPE html>
<html>
<head>
<title>Element Remove Attribute</title>
<style>
.title {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h2 id="heading" class="title">Computer Scientist</h2>
<input
type="text"
name="name"
placeholder="Enter Full Name"
value="Alan Turing"
id="scientist"
disabled
/>
<script>
let heading = document.getElementById("heading");
let input = document.getElementById("scientist");
// Using a setTimeout method, which will call the function body given inside after 3 seconds or 3000 milliseconds.
// After 3 seconds, all the attributes given below will be removed.
setTimeout(() => {
// Removing the "class" attribute from the "heading" element.
heading.removeAttribute("class");
// Removing the "value" attribute which showed "Alan Turing" in the "input" element.
input.removeAttribute("value");
// Removing the "disabled" attribute which disabled the "input" element.
input.removeAttribute("disabled");
}, 3000);
</script>
</body>
</html>
Output: Before
Output: After 3 seconds ⏲
In this way, we can change or update HTML Elements in the DOM using JavaScript. 🤯