How to get/change the HTML with DOM element in JavaScript ?
Last Updated :
07 Feb, 2023
In order to get/access the HTML for a DOM element in JavaScript, the first step is to identify the element base on its id, name, or its tag name. Then, we can use inner.HTML or outer.HTML to get the HTML.
Using the getElementById() method: This method gets/identifies the DOM elements using its ID and returns the element.
Example: In this example, we will use the getElementById() method of javascript to change the HTML DOM element in javascript.
Javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to get/change the HTML with
DOM element in JavaScript?
</title>
</head>
<body>
<h3>
Accessing HTML of a DOM
element in JavaScript.
</h3>
<p id="iD1">
JavaScript is used for web programming.
</p>
<button onclick=getHtml()>
Get and change the html for DOM element
</button>
<script>
function getHtml() {
var Element = document.getElementById("iD1");
alert(Element.innerHTML);
Element.style.color = "orange";
Element.innerHTML = "GeeksforGeeks";
}
</script>
</body>
</html>
|
Output:
How to get/change the HTML with DOM element in JavaScript ?
Using the getElementByName() method: This method gets/identifies the DOM element by using its class name and returns the element.
Example: In this example, we will use the getElementsByName() method of javascript to change the HTML DOM element in javascript.
Javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to get/change the HTML with
DOM element in JavaScript?
</title>
</head>
<body>
<h3>
Accessing HTML of a DOM
element in JavaScript.
</h3>
<p class="p1">
JavaScript is used for web programming.
</p>
<button onclick=getHtml()>
Get and change the html
for DOM element
</button>
<script>
function getHtml() {
var Element =
document.getElementsByClassName("p1");
alert(Element[0].innerHTML);
Element[0].style.color = "blue";
Element[0].innerHTML = "GeeksforGeeks";
}
</script>
</body>
</html>
|
Output:
How to get/change the HTML with DOM element in JavaScript ?
Using the getElementsByTagName(): This method gets/identifies the DOM element using its tag name and returns it.
Example: In this example, we will use the getElementsByTagName() method of javascript to change the HTML DOM element in javascript.
Javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to get/change the HTML with
DOM element in JavaScript?
</title>
</head>
<body>
<h3>
Accessing HTML of a DOM
element in JavaScript.
</h3>
<p>JavaScript is used for web programming.</p>
<p>JavaScript was invented in 1990s.</p>
<button onclick=getHtml()>
Get and change the html for DOM element
</button>
<script>
function getHtml() {
var Element = document.getElementsByTagName("p");
for (var i = 0; i < Element.length; i++) {
alert(Element[i].innerHTML);
Element[i].innerHTML = "GeeksforGeeks.";
}
}
</script>
</body>
</html>
|
Output:
How to get/change the HTML with DOM element in JavaScript ?
NOTE: The above three approaches use the inner.HTML property of the DOM element to get the HTML and alert it and then change the HTML content present in the element. The property inner.HTML is mainly used to change the text or rather the content present whereas outer.HTML is used for changing the tag and the content of the text as it returns the HTML content along with its tag.
The below example illustrates the use of outer.HTML property using the getElementsByTagName() method.
Javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to get/change the HTML with
DOM element in JavaScript?
</title>
</head>
<body>
<div> GeeksforGeeks </div>
<button onclick=getHtml()>
Get HTML for DOM element
</button>
<script>
function getHtml() {
var Element = document.getElementsByTagName("div");
alert(Element[0].outerHTML);
Element[0].style.color = "red";
Element[0].outerHTML = "<h1> JavaScript. </h1>"
}
</script>
</body>
</html>
|
Output:
How to get/change the HTML with DOM element in JavaScript ?
The functions getElementById(), and getElementsByClassName() can also be used to get the DOM elements for accessing outerHTML in the same manner as they were used to access innerHTML. Thus, we can access the HTML of a DOM using the above methods.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...