JavaScript innerHTML property

The JavaScript innerHTML property is used to generate the dynamic HTML and is the easiest way to modify the content of an HTML element. The dynamic HTML can be a registration form, comment form, links, etc.

Syntax 1: To change the content of an HTML element

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.getElementById(id).innerHTML = new HTML
document.getElementById(id).innerHTML = new HTML
document.getElementById(id).innerHTML = new HTML

Syntax 2: To get the content of an HTML element

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.getElementById(id).innerHTML = x[index].innerHTML;
document.getElementById(id).innerHTML = x[index].innerHTML;
document.getElementById(id).innerHTML = x[index].innerHTML;

Syntax 3: To get the content of an HTML ID

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.getElementById(id).innerHTML = myElement.innerHTML;
document.getElementById(id).innerHTML = myElement.innerHTML;
document.getElementById(id).innerHTML = myElement.innerHTML;

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<h1>"Get Element by Tag Name!"</h1>
<p>Example</p>
<p id="DOM"></p>
<script>
var x = document.getElementsByTagName("h1");
document.getElementById("DOM").innerHTML =
'The text in h1 is: ' + x[0].innerHTML;
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <h1>"Get Element by Tag Name!"</h1> <p>Example</p> <p id="DOM"></p> <script> var x = document.getElementsByTagName("h1"); document.getElementById("DOM").innerHTML = 'The text in h1 is: ' + x[0].innerHTML; </script> </body> </html>
<!DOCTYPE html>
<html>
<body>
<h1>"Get Element by Tag Name!"</h1>
<p>Example</p>
<p id="DOM"></p>
<script>
var x = document.getElementsByTagName("h1");
document.getElementById("DOM").innerHTML =
'The text in h1 is: ' + x[0].innerHTML;
</script>
</body>
</html>