Skip to content
Related Articles

Related Articles

How to get/change the HTML with DOM element in JavaScript ?
  • Last Updated : 27 Apr, 2020

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:




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




    <!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:
  • Using getElementsByTagName(): This method gets/identifies the DOM element using it’s tag name and returns it.

    Example:




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




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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :