HTML - DOM innerHTML Property

Previous
Quiz
Next

The HTML DOMinnerHTMLproperty is used to retrieve (read) the existing HTML content of an element and update it with new HTML content.

When you access element.innerHTML (e.g., document.getElementById('id').innerHTML or any other method), it retrieves the current content of that element. If you assign new content to it (e.g., element.innerHTML = "new_content"), it updates the existing content with the new HTML.

The following interactive example demonstrate the usage of the innerHTML method for different scenarios −

HTML DOM innerHTML
Welcome to Tutorialspoint
You are at the right place to learn...

Syntax

Following is the syntax of the HTML DOM innerHTML (to read the content) property −

element.innerHTML

To update the existing HTML content with new content, use the following syntax −

element.innerHTML = text

Where the "text", is the text content of the element.

Parameters

This property does not accept any parameter.

Return Value

This property returns a string that contains the HTML content within an element.

Example 1: Retrieving HTML Content using innerHTML

The following is the basic example of the HTML DOM innerHTML property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title>
<style>
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<h3>Click the below button to retrieve the "p" element content.</h3>
<p id="my_ele">Welcome to Tutorialspoint</p>
<button onclick="read()">Read</button>
<script>
   function read(){
      let ele = document.getElementById("my_ele");
      alert("The 'p' element content is: " + ele.innerHTML);
   }
</script>
</body>
</html>

The above program retrieves the HTML content of the "p" element.

Example 2: Updating HTML content using innerHTML

Following is another example of the HTML DOM innerHTML. We use this property to dynamically change or update the content within HTML elements at runtime −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title>
<style>
    button{
        padding: 8px 12px;
    }
</style>
</head>
<body>
<p>Click the button below to dynamically update the content of the 'div' element.</p>
<p id="heading">Heading</p>
<div id="content">Welcome to TP, you are at the right place to learn..</div>
<br>
<button onclick="changeContent()">Change Content</button>
<script>
   function changeContent() {
      // Update the heading and content using innerHTML
      document.getElementById('heading').innerHTML = '<b>New Heading</b>';
      document.getElementById('content').innerHTML = '<b>New content</b> has been updated!';
   }
</script>
</body>
</html>

The above program updates the existing content of elements having id "heading" and "content".

Example 3: Clearing Content using "innerHTML" Property

This example demonstrates how to dynamically clear the content inside a <div> element using the innerHTML property when the 'clear content' button is clicked −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title>
<style>
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below to clear the content.</p>
<div id="myDiv">Content to be cleared</div><br>
<button onclick="clearContent()">Clear Content</button>
<script>
   function clearContent() {
      document.getElementById('myDiv').innerHTML = '';
   }
</script>
</body>
</html>

Example 4: Generating Content Dynamically

The example below generates the content dynamically using the innerHTML property with JavaScript when the "Generate Content" button is clicked −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM innerHTML</title>
<style>
   button{
      padding: 8px 10px;
   }
</style>
</head>
<body>
<p>Click the below button to generate content dynamically.</p>
<div id="contentArea">Welcome to TP, you are at the right place to learn..</div>
<br>
<button onclick="generateContent()">Generate Content</button>
<script>
   function generateContent() {
      let count = 5;
      let html = '';
      for (let i = 1; i <= count; i++) {
         html += '<p>Paragraph ' + i + '</p>';
      }
      document.getElementById('contentArea').innerHTML = html;
   }
</script>
</body>
</html>

Example 5: Displaying Conditional Content

The following example shows how to conditionally display content using the innerHTML property when the "Show Content" button is clicked −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM innerHTML</title>
<style>
   button{
      padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below button to show content.</p>
<div id="contentArea">Initial content</div>
<br>
<button onclick="showContent()">Show Content</button>
<script>
   function showContent() {
      let condition = true;
      let content = condition ? '<p>Content is visible</p>' : '';
      document.getElementById('contentArea').innerHTML = content;
   }
</script>
</body>
</html>

Example 6: Highlighting Text Dynamically

The example below helps us understand how to highlight particular text within an HTML Element using the innerHTML property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title> 
<style>
   .highlight {
       background-color: yellow;
       font-weight: bold;
   }
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<p>It Highlights the Text dynamically</p>
<div id="myDiv">This text will be highlighted where "inner" occurs.</div>
<br>
<button onclick="highlightText()">Highlight Text</button>
<script>
   function highlightText() {
      let searchText = 'inner';
      let content = document.getElementById('myDiv').innerHTML;
      let highlightedContent = content.replace(new RegExp(searchText,'gi'),'<span class="highlight">$&</span>');
      document.getElementById('myDiv').innerHTML = highlightedContent;
   }
</script>
</body>
</html>

Example 7: Creating Tables Dynamically

The following example demonstrates how to dynamically create an HTML table with the HTML structure and display the table after constructing using the innerHTML property −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM innerHTML</title>
<style>
   button{
       padding: 8px 12px;
   }
   table, th, td{
       width: 33%;
       text-align: center;
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to create an HTML table.</p>
<div id="tableContainer">
</div>
<br>
<button onclick="createTable()">Create Table</button>
<script>
   function createTable() {
      let tableHTML = '<table border="1"><tr><th>Name</th><th>Age</th></tr>';
      let data = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Carol', age: 28 }
      ];
      data.forEach(item => {
        tableHTML += `<tr><td>${item.name}</td><td>
        ${item.age}</td></tr>`;
      });
      
      tableHTML += '</table>';
      document.getElementById('tableContainer').innerHTML = tableHTML;
   }
</script>
</body>
</html>

Example 8: Creating Message Based on User Input

This example shows how to create a message based on user input dynamically using the innerHTML property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM innerHTML</title>
<style>
   body {
      text-align: center;
   }
   label {
      font-size: 18px; 
   }
   input[type="text"] {
      padding: 8px;
      font-size: 16px;
      border: 1px solid #ccc;
   }
   button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50; 
      border: none; 
      cursor: pointer;
      margin-top :10px;
   }
   button:hover {
      background-color: #45a049;
   }
   #messageBox {
      margin-top: 20px;
      padding: 20px;
      background-color: #f0f0f0;
      border: 1px solid #ccc; 
   }
</style>
</head>
<body>
   <h3>Creates Message based on User Input</h3>
   <h1>Welcome to Tutorialspoint</h1>
   <label for="nameInput">Enter your name:</label>
   <input type="text" id="nameInput">
   <button onclick="createMessage()">Create Message</button>
   <div id="messageBox"></div>
   <script>
      function createMessage() {
         let name = document.getElementById("nameInput").value;
         let message = `<p>Hello <b>${name}</b> ! Welcome to Tutorialspoint.</p>`;
         document.getElementById("messageBox").innerHTML = message;
      }
   </script>
</body>
</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
innerHTML Yes Yes Yes Yes Yes
html_dom.htm
Print Page
Previous
Next
Advertisements