By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

JavaScript innerHTML Property

Reference on the JavaScript innerHTML Property. How to set and retrieve content with innerHTML.

Created: 2013-06-28 00:49

The JavaScript innerHTML property sets or retrieves the content, between the start and end tag of an object.

The innerHTML property only works on elements, which has both a start and end tag.

The following elements are read only: col, colgroup, frameset, html, style, table, tbody, tfoot, thead, title, tr.

Setting the content of innerHTML, will replace the existing content of the object

Set innerHTML Example

Set innerHTML Example

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>My first Website</title>
    <script type="text/javascript">
     function ReplaceC() {
      document.getElementById('Basement').innerHTML="Brugbart is Awsome!";
     }
    </script>
  </head>

  <body>
    <div id="Basement"><p>This is some content from Basement</p>
    </div>
	<p><button onclick="ReplaceC();">Replace Basement content!</button></p>
  </body>

</html>

Brugbart Vision!

Retrieve innerHTML Example

Get innerHTML Example

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>My first Website</title>
    <script type="text/javascript">
	 var ElementObject;
     function ReplaceC() {
      ElementObject = document.getElementById('Basement');
	  alert(ElementObject.innerHTML);
     }
    </script>
  </head>

  <body>
    <div id="Basement"><p>This is some content from Basement</p>
    </div>
	<p><button onclick="ReplaceC();">Retrieve Basement content!</button></p>
  </body>

</html>

Brugbart Vision!