JavaScript Tutorial : HTML Element innerHTML Property

The innerHTML property can be used to modify your document's HTML on the fly.

 When you use innerHTML, you can change the page's content without refreshing the page. This can make your website feel quicker and more responsive to user input.

The innerHTML property is used along with getElementById within your JavaScript code to refer to an HTML element and change its contents.

The innerHTML property is not actually part of the official DOM specification. Despite this, it is supported in all major browsers, and has had widespread use across the web for many years. DOM, which stands for Document Object Model, is the hierarchy that you can use to access and manipulate HTML objects from within your JavaScript.

The innerHTML Syntax

document.get ElementById('{ID of element}').innerHTML = '{content}';

Basic innerHTML Example

<script type="text/javascript">
function Msg1(){
  document.getElementById(''myText').innerHTML = 'Thanks!';
}
function Msg2(){
  document.getElementById('myText').innerHTML = 'Try message 1 again...';
}
</script>
<input type="button" onclcik="Msg1()" value="Show Message 1" />
<input type="button" onclcik="Msg2()" value="Show Message 1" />
<p id="myText"></p>