JavaScript innerHTML
Summary: in this tutorial, you will learn how to use the JavaScript innerHTML
property of an element to get or set an HTML markup contained in the element.
The innerHTML
is a property of the Element
that allows you to get or set the HTML markup contained within the element:
element.innerHTML = 'new content';
element.innerHTML;
Code language: JavaScript (javascript)
Reading the innerHTML property of an element
To get the HTML markup contained within an element, you use the following syntax:
let content = element.innerHTML;
Code language: JavaScript (javascript)
When you read the innerHTML
of an element, the web browser has to serialize the HTML fragment of the element’s descendants.
1) Simple JavaScript innerHTML example
Suppose that you have the following markup:
<ul id="menu">
<li>Home</li>
<li>Services</li>
</ul>
Code language: HTML, XML (xml)
The following example uses the innerHTML
property to get the content of the <ul>
element:
let menu = document.getElementById('menu');
console.log(menu.innerHTML);
Code language: JavaScript (javascript)
How it works:
- First, select the
<ul>
element by its id (menu
) using thegetElementById()
method. - Then, get the HTML content of the
<ul>
element using theinnerHTML
.
Output:
<li>Home</li>
<li>Services</li>
Code language: HTML, XML (xml)
2) Examining the current HTML source
The innerHTML
property returns the current HTML source of the document, including all changes that have been made since the page was loaded.
See the following example:
<html>
<head>
<meta charset="utf-8">
<title>JavaScript innerHTML</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Services</li>
</ul>
<script>
let menu = document.getElementById('menu'); // create new li element
let li = document.createElement('li');
li.textContent = 'About Us';
// add it to the ul element
menu.appendChild(li);
console.log(menu.innerHTML);
</script>
</body>
</html>
Code language: HTML, XML (xml)
Output:
<li>Home</li>
<li>Services</li>
<li>About Us</li>
Code language: HTML, XML (xml)
How it works.
- First, get the
<ul>
element with the idmenu
using thegetElementById()
method. - Second, create a new
<li>
element and add it to the <ul> element using thecreateElement()
andappendChild()
methods. - Third, get the HTML of the
<ul>
element using the innerHTML property of the <ul> element. The contents of the <ul> element include the initial content and the dynamic content created dynamically by JavaScript.
Setting the innerHTML property of an element
To set the value of innerHTML
property, you use this syntax:
element.innerHTML = newHTML;
The setting will replace the existing content of an element with the new content.
For example, you can remove the entire contents of the document by clearing the contents of the document.body
element:
document.body.innerHTML = '';
Code language: JavaScript (javascript)
⚠️ Security Risk
HTML5 specifies that a <script> tag inserted with innerHTML should not execute.
Suppose you have the following index.html
document:
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS innerHTML example</title>
</head>
<body>
<div id="main"></div>
<script src="app.js"></script>
</body>
</html>
Code language: HTML, XML (xml)
And the app.js
file looks like this:
const scriptHTML = `<script>alert("Alert from innerHTML");</script>`;
const main = document.getElementById('main');main.innerHTML = scriptHTML;
Code language: JavaScript (javascript)
In this example, the alert()
inside the <script>
tag will not execute.
However, if you change the source code of the app.js
to the following:
const main = document.getElementById('main');const externalHTML = `<img src='1' onerror='alert("Error loading image")'>`;
// shows the alert
main.innerHTML = externalHTML;
Code language: JavaScript (javascript)
In this example, the image with the src 1 will not be loaded successfully. Therefore, the on error will execute that runs the alert().
Instead of having a simple alert(), hackers may include malicious code, the users who open the webpage will be vulnerable.
Therefore, you should not set the contents that you have no control to the innerHTML
or you will face a potential security risk.
If you want to insert plain text into the document, you can use the textContent
property instead of the innerHTML
. The textContent
will not be parsed as the HTML but as the raw text.
Summary
- Use
innerHTML
property of an element to get or set HTML contained within the element. - The
innerHTML
property returns the current HTML source of the element, including any change that has been made since the page was loaded. - Do not use
innerHTML
to set new contents that you have no control to avoid a security risk.