In this article, we will append HTML code to a div element using JavaScript. In order to do this, we will first select the div element by using the document.getElementById() method, then we will use the below-mentioned methods to append the HTML code to div.
There are two ways to append HTML code to a div through JavaScript:
To add HTML code to a div using the ‘innerHTML' attribute in JavaScript, select the div and simply use += to append the new code.
Syntax:
element.innerHTML += "additional HTML code"
// OR
element.innerHTML = element.innerHTML +
"additional HTML code"
Example: This example uses the above-explained approach to append the HTML code to a div using JavaScript.
html
<!DOCTYPE html>
<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:
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.
HTML code can be appended to a div element using the insertAdjacentHTML() method. However, you need to select an element inside the div to add the code. This method takes two parameters:
- The position (in the document) where you want to insert the code (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’)
- The HTML code you want to insert is enclosed in quotes
Syntax:
elementInsideDiv.insertAdjacentHTML(
'afterend',
'additional HTML code'
);
HTML
<!DOCTYPE html>
<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:
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.
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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
24 Nov, 2023
Like Article
Save Article