How to append HTML code to a div using appendChild in JavaScript
A guide on using `appendChild` to append HTML code to a `div` in JavaScript. This approach ensures DOM integrity and allows you to dynamically add HTML elements.
In this article, we will learn how to use the appendChild method in JavaScript to append new HTML content to a div. This method uses DOM Nodes, making it a more precise way to interact with web pages compared to using innerHTML.
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 using appendChild</title>
</head>
<body>
<div id="myDiv">
<p>Initial content inside the div.</p>
</div>
<button onclick="appendHTML()">Add More HTML</button>
<script>
// Function to append HTML content to the div
function appendHTML() {
// Get the div element by its id 'myDiv'
const myDiv = document.getElementById("myDiv");
// Create a new p element
const newParagraph = document.createElement("p");
// Create a text node for the p element
const text = document.createTextNode("New paragraph added using appendChild.");
// Append the text node to the p element
newParagraph.appendChild(text);
// Append the p element to the div
myDiv.appendChild(newParagraph);
}
</script>
</body>
</html>
Detailed explanation:
-
<!DOCTYPE html>: Declares the document as an HTML document. -
<div id="myDiv">: Creates adivelement with initial content. -
<button onclick="appendHTML()">: Button to call theappendHTMLfunction when clicked. -
function appendHTML(): Defines a JavaScript function to append HTML to thediv. -
const myDiv = document.getElementById("myDiv");: Selects thedivelement by itsid. -
const newParagraph = document.createElement("p");: Creates a newpelement. -
const text = document.createTextNode("...");: Creates text content for thepelement. -
newParagraph.appendChild(text);: Appends the text node to thepelement. -
myDiv.appendChild(newParagraph);: Appends thepelement to thediv.
Tips:
-
appendChildhelps maintain the existing DOM structure without replacing content likeinnerHTML. - You can combine
createElementandappendChildto create more complex HTML structures.