JavaScript innerHTML
last modified April 2, 2025
In this article, we explore the innerHTML property in JavaScript.
This property is essential for DOM manipulation, allowing developers to get or
set the HTML content of an element.
Basic Definition
The innerHTML property gets or sets the HTML or XML markup contained
within an element. It is one of the most powerful properties for dynamic content
updates in JavaScript.
When reading innerHTML, it returns the HTML content as a string.
When setting innerHTML, it completely replaces the element's
content with the parsed HTML string.
Basic innerHTML Usage
This example demonstrates how to get and set HTML content using innerHTML.
<!DOCTYPE html>
<html>
<head>
<title>Basic innerHTML</title>
</head>
<body>
<div id="content"><p>Original content</p></div>
<button onclick="changeContent()">Change Content</button>
<script>
function changeContent() {
const element = document.getElementById('content');
console.log(element.innerHTML); // Logs current content
element.innerHTML = '<h2>New Content</h2><p>Changed via innerHTML</p>';
}
</script>
</body>
</html>
In this basic example, we have a div element with initial content. The JavaScript code first logs the current HTML content, then replaces it with new HTML markup when the button is clicked.
This demonstrates the fundamental usage of innerHTML to access
and modify an element's content. The property can handle complex HTML
structures, not just plain text.
Creating Dynamic Lists
This example shows how to use innerHTML to dynamically generate list items.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Lists</title>
</head>
<body>
<ul id="fruitList"></ul>
<button onclick="generateList()">Generate List</button>
<script>
function generateList() {
const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
const listElement = document.getElementById('fruitList');
let listHTML = '';
fruits.forEach(fruit => {
listHTML += `<li>${fruit}</li>`;
});
listElement.innerHTML = listHTML;
}
</script>
</body>
</html>
Here we start with an empty unordered list. When the button is clicked, the
generateList function creates HTML for list items from an array
and inserts them using innerHTML.
This demonstrates how innerHTML can efficiently update multiple
elements at once. Building the HTML string first and then setting it once is
more performant than multiple DOM manipulations.
Security Considerations
This example demonstrates the potential security risks with innerHTML.
<!DOCTYPE html>
<html>
<head>
<title>Security Risks</title>
</head>
<body>
<div id="userContent"></div>
<input type="text" id="userInput" placeholder="Enter some text">
<button onclick="displayContent()">Display</button>
<script>
function displayContent() {
const input = document.getElementById('userInput').value;
const element = document.getElementById('userContent');
// UNSAFE: Potential XSS vulnerability
element.innerHTML = input;
// SAFER alternative:
// element.textContent = input;
}
</script>
</body>
</html>
In this example, user input is directly inserted into the page using
innerHTML. This creates an XSS vulnerability if the input
contains malicious script tags.
Always sanitize user input before using innerHTML, or consider
using textContent when only plain text is needed. This is a
critical security consideration when working with dynamic content.
Performance Comparison
This example compares innerHTML with DOM manipulation methods.
<!DOCTYPE html>
<html>
<head>
<title>Performance Comparison</title>
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
<button onclick="runTest()">Run Test</button>
<script>
function runTest() {
const items = Array(1000).fill().map((_, i) => `Item ${i + 1}`);
// Using innerHTML
console.time('innerHTML');
const container1 = document.getElementById('container1');
container1.innerHTML = items.map(item => `<div>${item}</div>`).join('');
console.timeEnd('innerHTML');
// Using DOM methods
console.time('DOM');
const container2 = document.getElementById('container2');
items.forEach(item => {
const div = document.createElement('div');
div.textContent = item;
container2.appendChild(div);
});
console.timeEnd('DOM');
}
</script>
</body>
</html>
This code compares two approaches to adding 1000 elements: using
innerHTML versus using DOM manipulation methods. The console
timings show the performance difference.
innerHTML is generally faster for bulk operations because it
minimizes reflows and repaints. However, DOM methods provide more control
and are safer when working with user-generated content.
Combining with Template Literals
This example shows how to use template literals with innerHTML for complex HTML.
<!DOCTYPE html>
<html>
<head>
<title>Template Literals</title>
<style>
.card {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
width: 200px;
}
</style>
</head>
<body>
<div id="cardContainer"></div>
<button onclick="createCard()">Add Card</button>
<script>
function createCard() {
const container = document.getElementById('cardContainer');
const title = 'Sample Card';
const content = 'This card was created using template literals and innerHTML';
container.innerHTML += `
<div class="card">
<h3>${title}</h3>
<p>${content}</p>
<small>Created: ${new Date().toLocaleTimeString()}</small>
</div>
`;
}
</script>
</body>
</html>
Here we use template literals to create a clean, readable way to generate
complex HTML structures. The card template includes dynamic data and is
appended to the container using innerHTML.
Template literals make HTML generation more maintainable by keeping the
structure visible. Note the use of += to append rather than
replace existing content.
Source
In this article, we have shown how to use the innerHTML property
in JavaScript. This powerful feature enables dynamic content updates but requires
careful use regarding security and performance.
Author
List all JS DOM tutorials.