Appending HTML to a div using innerHTML in JavaScript
This article guides how to append HTML code to a `div` element using the `innerHTML` property in JavaScript. Readers will learn how to work with the DOM to add new HTML content to a specific `div`.
In this article, you'll learn how to use the innerHTML property to append HTML code to a div element. This is a simple way to dynamically update or add HTML content to your webpage.
JavaScript Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Append HTML with innerHTML</title>
</head>
<body>
<div id="contentDiv">
<p>Initial content inside the div.</p>
</div>
<button onclick="appendContent()">Add HTML</button>
<script>
// Function to append HTML content to the div
function appendContent() {
// Get the div element by id 'contentDiv'
var contentDiv = document.getElementById("contentDiv");
// Append new HTML content to the div
contentDiv.innerHTML += "<p>New HTML content added.</p>";
}
</script>
</body>
</html>
Detailed explanation:
<!DOCTYPE html>: Declares the document as an HTML5 document.<div id="contentDiv">: Creates adivelement to hold the HTML content.<button onclick="appendContent()">: A button that calls theappendContentfunction when clicked.function appendContent(): Defines a JavaScript function to append HTML to thediv.var contentDiv = document.getElementById("contentDiv");: Gets thedivelement byid.contentDiv.innerHTML += "...";: Appends new HTML content to thediv.
Tips:
- Ensure that the HTML content being appended is secure and free from malicious code to avoid XSS attacks.
innerHTMLcan replace the entire content of an element, so be careful not to lose existing content when appending new HTML.