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

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 getElementById() method: This method gets/identifies the DOM elements using it’s ID and returns the element.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    • Before Clickin the Button:
    • Aftr Clicking the Button:
  • Using getElementByName() method: This method gets/identifies the DOM element by using it’s the class name and returns the element.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:



    • Before Clicking the Button:
    • After Clicking the Button:
  • Using getElementsByTagName(): This method gets/identifies the DOM element using it’s tag name and returns it.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.