How to append HTML code to a div using JavaScript ?
Updating content on a webpage without reloading the entire page makes for a faster and smoother user experience. JavaScript allows you to do this by adding new HTML to elements like divs dynamically.
There are four simple ways to add HTML to a div using JavaScript:
Let’s go through each method and see how they work.
1. Using the innerHTML Attribute
The innerHTML attribute is one of the most straightforward ways to append new HTML to a div. You simply access the innerHTML of the div and add the new HTML code to it using the += operator.
<html>
<head>
<title>
How to Append HTML Code to
a Div using Javascript?
</title>
<style>
body {
text-align: center;
padding: 5%;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div id="add_to_me">
<h1>GeeksforGeeks</h1>
<p>
This is the text which has
already been typed into
the div
</p>
</div>
<button onclick="addCode()">
Add Stuff
</button>
<script>
function addCode() {
document.getElementById("add_to_me")
.innerHTML +=
`<h3>
This is the text which has
been inserted by JS
</h3>`;
}
</script>
</body>
</html>
Output:
In this code
- They dynamically adds content to a <div> when a button is clicked.
- Initially, the div contains a heading and a paragraph.
- When the “Add Stuff” button is clicked, a new <h3> element is appended to the div using JavaScript’s innerHTML += method.
Note: This method basically destroys all the content of the div and recreates it. So, if you have any listeners attached to the child nodes of that div, they will be lost.
2. Using the insertAdjacentHTML() Method
The insertAdjacentHTML() method method allows you to insert HTML into a div at specific positions. You can specify where you want the new content relative to the existing content.
<html>
<head>
<title>
How to Append HTML Code to
a Div using Javascript?
</title>
<style>
body {
text-align: center;
padding: 5%;
}
h1 {
color: green
}
</style>
</head>
<body>
<div id="add_to_me">
<h1>GeeksforGeeks</h1>
<p id="add_after_me">
This is the text which has
already been typed into
the div
</p>
</div>
<button onclick="addCode()">
Add Stuff
</button>
<script>
function addCode() {
document.getElementById("add_after_me")
.insertAdjacentHTML("afterend",
`<h3>
This is the text which has
been inserted by JS
</h3>`);
}
</script>
</body>
]</html>
Output
In this code
- It adds a new <h3> element after the existing <p> element inside a div when the “Add Stuff” button is clicked.
- It uses JavaScript’s insertAdjacentHTML(“afterend”, …) to insert the new content after the specified element (add_after_me).
3. Using the appendChild() Method
The appendChild() method allows you to append an actual HTML element to a div. This method works differently because you need to first create the new HTML element and then append it to the div.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>
Append HTML to a div in JavaScript
</title>
<style>
#conatiner{
text-align: center;
}
</style>
</head>
<body>
<div id="conatiner">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
Click the below button to append the
HTML to a Div.
</h3>
<button id="btn">Append HTML</button>
</div>
<script>
const btn = document.getElementById('btn');
function appendHTML(){
const ele = document.getElementById('conatiner');
const newDiv = document.createElement('div');
newDiv.innerHTML =
`
<h2>
Hey Geek,<br/>
Welcome to GeeksforGeeks!!
</h2>
<h3>
This is the HTML appended using the
appendChild() method in JavaScript.
</h3>
`;
ele.appendChild(newDiv);
}
btn.addEventListener('click', appendHTML);
</script>
</body>
</html>
Output:
In this code
- This HTML document adds new content to a <div> when a button is clicked.
- It uses JavaScript to create a new <div>, adds HTML inside it, and appends it to the existing #conatiner div using appendChild().
NOTE: You should never insert the HTML code in this way if you are taking it as input from the user. It opens your website to cross-site scripting vulnerabilities.
4. Using the append() Method
The append() method is a more modern way to append content. Unlike appendChild(), which only allows you to append DOM elements, append() can append both DOM nodes and text or HTML strings. It also allows you to append multiple nodes at once.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks - Appending HTML with append()</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
text-align: center;
margin: 0;
padding: 0;
}
#container {
margin-top: 50px;
padding: 20px;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 50%;
margin-left: auto;
margin-right: auto;
}
h1 {
color: #4CAF50;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
button:hover {
background-color: #45a049;
}
p {
color: #555;
}
</style>
</head>
<body>
<div id="container">
<h1>GeeksforGeeks</h1>
<p>Click below to add new content!</p>
</div>
<button onclick="addContent()">Add New Content</button>
<script>
function addContent() {
var container = document.getElementById('container');
var newParagraph = document.createElement('p');
newParagraph.textContent = 'New content added dynamically!';
container.append(newParagraph);
}
</script>
</body>
</html>
Output
append() Method
In this code
- This HTML page uses JavaScript to dynamically add content to a div.
- When the “Add New Content” button is clicked, a new paragraph is created and appended to the #container div.
- The page is styled with a clean, centered layout and a button that changes color on hover.
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples .
Conclusion
Dynamically adding HTML content to a webpage using JavaScript enhances interactivity and provides a seamless user experience. Whether you use methods like innerHTML, insertAdjacentHTML, appendChild(), or the more flexible append(), each method has its own advantages and best-use scenarios.
