innerHTML

innerHTML JavaScript: Main Tips

• This property is used to set or return the HTML content inside an element.
• Using innerHTML, you can change HTML content inside element tags as you like, but not the tags themselves.

innerHTML Property Explained

So, what is innerHTML? Let's start by reminding everyone that every HTML element has an inner HTML property. It is used to define HTML tags and also the content that is inserted between them. This property is one of the components of the DOM that lets developers manipulate the appearances of web pages. In other words, it allows you to get information about all DOM elements.

Additionally, you have the opportunity to modify or replace HTML elements. Therefore, you should learn how the innerHTML JavaScript property can be used to your advantage.

People can struggle and complain about innerHTML not working. Such things usually occur because of human error, when strings are not appropriately defined, or there are some mistakes in JavaScript code.

This property is used to set or return the HTML content inside an element:

document.getElementById("samplePara").innerHTML = "Help! This paragraph has changed!";

Correct Syntax

To avoid mistakes, we suggest you learn the proper way of manipulating DOM elements using the innerHTML JavaScript property. After you learn the basics, you won't have to worry about innerHTML not working ever again.

To return the HTML content inside an element, you should follow this code example:

HTMLElementObject.innerHTML

If you wish to modify HTML elements with the innerHTML JavaScript property, we present you the appropriate way of setting the HTML content inside an element:

HTMLElementObject.innerHTML = text

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Parameters

As you can see in the syntax examples, the innerHTML JavaScript property can only take one value. It is called text.

Text specifies the HTML content inside an element. As a parameter, it is used to make modifications to the text of the element. After applying it, you will be able to change texts that are positioned between different HTML tags.

Return Value

After the innerHTML JavaScript property is applied to a DOM element, you will receive its content. A string which represents the HTML content inside an element is called the return value.

There are no limitations to the type of tags the inner HTML can set and return. Therefore, feel free to practice. The more you try, the more you learn!

Code Examples

To help you understand what is innerHTML property and how it's used, we'll provide you with useful code examples that you can practice your code-writing skills on. After you click the Try it Live button, you will be able to make modifications and learn without having to leave the browser!

The first example displays how you can make modifications to two DOM elements:

document.getElementById("samplePara").innerHTML = "Hello, sir, what seems to be the problem?";   
document.getElementById("sampleDiv").innerHTML = "It's the paragraph. It changed!";

The following code is used to alert the content of <p> with id="samplePara":

alert(document.getElementById("samplePara").innerHTML);

You can also remove the HTML content from the <p> tag with the following code:

document.getElementById("samplePara").innerHTML = "";

The final code example shows the code for when you want to modify the content of HTML element, its URL, and the target of a link:

document.getElementById("sampleAnchor").innerHTML = "BitDegree";  
document.getElementById("sampleAnchor").href = "https://www.BitDegree.org";  
document.getElementById("sampleAnchor").target = "_blank";