JavaScript innerHTML

In JavaScript, innerHTML refers to the content of an HTML element. Therefore, the innerHTML property sets or returns content to or of the specified HTML element. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The value is <span id="x"></span></p>
   
   <script>
      var element = document.getElementById("x");
      element.innerHTML = 10;
   </script>
   
</body>
</html>

Output

The value is

In above example, the following statement:

var element = document.getElementById("x");

is used to initialize the element whose ID value is x as an element variable. And using the following statement:

element.innerHTML = 10;

The value 10 was set as the content of the returned element. In this case, if the returned element already has some content, the existing content will be removed and the new content using the innerHTML will be set to it.

To set or get the content of an HTML element using the innerHTML property, we need to get the element using any of the following methods:

JavaScript innerHTML syntax

The syntax of the innerHTML property in JavaScript is:

element.innerHTML

JavaScript innerHTML example

Consider the following code as an example demonstrating the use of "innerHTML" in JavaScript:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="cc">The name of website is: codescracker.com</p>
   <p>The content of P tag, with cc as its ID value is:
   <span id="res"></span></p>
   
   <script>
      content = document.getElementById("cc").innerHTML;
      element = document.getElementById("res");
      element.innerHTML = content;
   </script>
   
</body>
</html>

Output

The name of website is: codescracker.com

The content of P tag, with cc as its ID value is:

The preceding example includes two paragraphs and a script. The first paragraph has the ID "cc" and the text "The website's name is codescracker.com." The second paragraph includes some text as well as an empty span element with the ID "res".

The JavaScript code within the "script" tags selects the paragraph element with an ID of "cc" using the document.getElementById() method and retrieves its innerHTML value. This value, which is the text "The name of the website is: codescracker.com", is then stored in a variable called "content". The script then selects the span element with the ID "res" using document.getElementById() and stores it in the variable "element" The innerHTML value of the "element" variable is then set to the value of the "content" variable, which is "The name of the website is: codescracker.com".

The text "The name of the website is: codescracker.com" is therefore added to the empty span element with ID "res" when the script executes, matching the innerHTML value of the paragraph element with ID "cc".

The above example can also be written as:

<!DOCTYPE html>
<html>
<body>

   <p id="cc">The name of website is: codescracker.com</p>
   <p>The content of P tag, with cc as its ID value is:
   <span id="res"></span></p>
   
   <script>
      document.getElementById("res").innerHTML = document.getElementById("cc").innerHTML;
   </script>
   
</body>
</html>

In above example, the following JavaScript code:

document.getElementById("cc").innerHTML

returns the content of an HTML element, whose ID value is cc. And this content will be initialized to an HTML element whose ID value is res.

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!