How to get/change the HTML with DOM element in JavaScript ?

02 Sep, 2021
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.
1. Using getElementById() method: This method gets/identifies the DOM elements using it’s ID and returns the element.
Example: 
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: 
Before Clickin the Button:  
After Clicking the Button:  
2. Using getElementByName() method: This method gets/identifies the DOM element by using it’s the class name and returns the element.
Example: 
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: 
Before Clicking the Button:  
After Clicking the Button:  
3. Using getElementsByTagName(): This method gets/identifies the DOM element using it’s tag name and returns it.
Example: 
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: 
Before Clicking the button: 
After Clicking the Button: 
NOTE: The above three approaches use inner.HTML property of the DOM element to get the HTML and alerts it and then changes 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.
Below example illustrates the use of outer.HTML property using 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: 
Before Clicking the Button: 
After Clicking the Button: 
The functions getElementById(), 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 HTML of a DOM using the above methods. 
rajeev0719singh
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS