JS - element properties - innerHTML

revision:

sets or returns the content of an element.

top

This property sets or returns the HTML content (inner HTML) of an element.

Syntax:

element.innerHTML : returns the innerHTML property: the HTML content of the element.

element.innerHTML = text : sets the innerHTML property:

property value:

text : a string - HTML content.

example

I am a paragraph.

The content of "par" is:

Click me to change my HTML content (innerHTML).

code: 
                <div>
                    <p id="par">I am a paragraph.</p>
                    <p>The content of "par" is: <span id="prop"></span></p>
                    <p id="prop1" onclick="firstFunction()">Click me to change my HTML content (innerHTML).</p>
                </div>
                <script>
                    let html = document.getElementById("par").innerHTML;
                    document.getElementById("prop").innerHTML = html;
                    function firstFunction() {
                        document.getElementById("prop1").innerHTML = "I have changed!";
                    }
                </script>

Microsoft

            <div>
                <p><a id="inner" target="_blank" href="https://www.microsoft.com" rel="noopener">Microsoft
                </a></p>
                <button onclick="firstFunction()">Change the link</button>
            </div>
            <script>
                function firstFunction() {
                    const element = document.getElementById("inner");
                    element.innerHTML = "my website";
                    element.href = "https://www.lwitters.com";
                }
            </script>