How To Use Javascript To Change Html

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

In guild to get/admission the HTML for a DOM chemical element in JavaScript, the get-go step is to identify the element base of operations on its id, name or its tag name. Then, we can use inner.HTML or outer.HTML to become the HTML.

1. Using getElementById() method: This method gets/identifies the DOM elements using it's ID and returns the element.

Case:

Javascript

                <!DOCTYPE html>              
                <html>              
                <head>              
                                <title>              
                                How to get/change the HTML                                with              
                                DOM element                                in                JavaScript?              
                                </championship>              
                </head>              
                <torso>              
                                <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 modify the html                                for                DOM element              
                                </push>              
                                <script>              
                                part                getHtml() {              
                                var                Element = document.getElementById(                "iD1"                );              
                                alert(Element.innerHTML);              
                                Element.style.color =                                "orange"                ;              
                                Element.innerHTML =                                "GeeksforGeeks"                ;              
                                }              
                                </script>              
                </body>              
                </html>              

Output:

Earlier Clickin the Button:

After Clicking the Button:

2. Using getElementByName() method: This method gets/identifies the DOM element by using it'southward the course name and returns the element.

Example:

Javascript

                <!DOCTYPE html>              
                <html>              
                <caput>              
                                <championship>              
                                How to go/change the HTML                                with              
                                DOM element                                in                JavaScript?              
                                </title>              
                </caput>              
                <body>              
                                <h3>              
                                Accessing HTML of a DOM              
                                element                                in                JavaScript.              
                                </h3>              
                                <p course=                "p1"                >              
                                JavaScript is used                                for                web programming.              
                                </p>              
                                <push onclick=getHtml()>              
                                Get and alter the html              
                                for                DOM element              
                                </button>              
                                <script>              
                                function                getHtml() {              
                                var                Element =              
                                document.getElementsByClassName(                "p1"                );              
                                alert(Element[0].innerHTML);              
                                Chemical element[0].manner.color =                                "bluish"                ;              
                                Element[0].innerHTML =                                "GeeksforGeeks"                ;              
                                }              
                                </script>              
                </torso>              
                </html>              

Output:

Before Clicking the Button:

After Clicking the Button:

3. Using getElementsByTagName(): This method gets/identifies the DOM chemical element using it's tag proper name and returns it.

Example:

Javascript

                <!DOCTYPE html>              
                <html>              
                <caput>              
                                <title>              
                                How to become/modify 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              
                                </push>              
                                <script>              
                                function                getHtml() {              
                                var                Chemical element = document.getElementsByTagName(                "p"                );              
                                for                (                var                i = 0; i < Element.length; i++) {              
                                alarm(Chemical element[i].innerHTML);              
                                Element[i].innerHTML =                                "GeeksforGeeks."                ;              
                                }              
                                }              
                                </script>              
                </body>              
                </html>              

Output:

Before Clicking the button:

After Clicking the Button:

NOTE: The above three approaches utilize inner.HTML property of the DOM element to get the HTML and alerts it and and so changes the HTML content present in the chemical 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 equally information technology returns the HTML content along with its tag.

Below case illustrates the use of outer.HTML property using getElementsByTagName() method.

Javascript

                <!DOCTYPE html>              
                <html>              
                <head>              
                                <championship>              
                                How to go/change the HTML                                with              
                                DOM element                                in                JavaScript?              
                                </title>              
                </head>              
                <body>              
                                <div> GeeksforGeeks </div>              
                                <button onclick=getHtml()>              
                                Get HTML                                for                DOM element              
                                </button>              
                                <script>              
                                office                getHtml() {              
                                var                Element = document.getElementsByTagName(                "div"                );              
                                alert(Element[0].outerHTML);              
                                Element[0].style.color =                                "scarlet"                ;              
                                Element[0].outerHTML =                                "<h1> JavaScript. </h1>"              
                                }              
                                </script>              
                </body>              
                </html>              

Output:

Before Clicking the Button:

Later on Clicking the Button:

The functions getElementById(), getElementsByClassName() tin also exist used to get the DOM elements for accessing outerHTML in the same manner as they were used to access innerHTML. Thus, we tin access HTML of a DOM using the higher up methods.