InnerHTML In JavaScript

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

The syntax for using innerHTML goes like this:

Code
document.getElementById('{ID of element}').innerHTML = '{content}';

In this syntax example, {ID of element} is the ID of an HTML element and {content} is the new content to go into the element.

Basic innerHTML Example

Here's a basic example to demonstrate how innerHTML works.

This code includes two functions and two buttons. Each function displays a different message and each button triggers a different function.

In the functions, the getElementById refers to the HTML element by using its ID. We give the HTML element an ID of "myText" using id="myText".

So in the first function for example, you can see that document.getElementById('myText').innerHTML = 'Thanks!'; is setting the innerHTML of the "myText" element to "Thanks!".

Code	Result
<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" onclick="Msg1()" value="Show Message 1" /> <input type="button" onclick="Msg2()" value="Show Message 2" /> <p id="myText"></p>

Example 2: innerHTML With User Input

Here's an example of using innerHTML with a text field. Here, we display whatever the user has entered into the input field.

Code	Result
<script type="text/javascript"> function showMsg(){ var userInput = document.getElementById('userInput').value; document.getElementById('userMsg').innerHTML = userInput; } </script> <input type="input" maxlength="40" id="userInput" onkeyup="showMsg()" value="Enter text here..." /> <p id="userMsg"></p>

Example 3: Formatting with getElementById

In this example, we use the getElementById property to detect the color that the user has selected. We can then use style.background to apply the new color. In both cases, we refer to the HTML elements by their ID (using getElementById.)

Code

Result

<script type="text/javascript"> function changeColor(){ var newColor = document.getElementById('colorPicker').value; document.getElementById('colorMsg').style.background = newColor; } </script> <div id="colorMsg" style="font-size:18px;width:150px;height:100px;padding:5px;">Choose a background color...</div> <select id="colorPicker" onchange="JavaScript:changeColor()"> <option value="transparent">None</option> <option value="yellow">Yellow</option> <option value="salmon">Salmon</option> <option value="lightblue">Light Blue</option> <option value="limegreen">Lime Green</option> </select>

Choose a background color... None Yellow Salmon Light Blue Lime Green

• << 2D Arrays
• Tutorial Summary >>

Enjoy this page?

2. Link to this page (copy/paste into your own website or blog):
   <a href="http://www.quackit.com/javascript/tutorial/innerhtml_in_javascript.cfm">InnerHTML In JavaScript</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!