How to use the appendChild() method In Javascript
The appendChild() method can be used to append the HTML inside a div tag by selecting it and operating the appendChild() method on it by passing the HTML as parameter to it.
Syntax:
selected_div_element.appendChild(HTML_to_append);
Example: The below code will explain the use of the appendChild() method to append the HTML to a div.
<!DOCTYPE html>
<html lang="en">
<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">
w3wiki
</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 w3wiki!!
</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:
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.
How to append HTML code to a div using JavaScript ?
Want to dynamically add new content to your web pages? JavaScript makes it easy to inject HTML code directly into specific “div” elements. In JavaScript, there are several ways to append HTML code to a div. To append an HTML code to a div, we will first select the div element by using the DOM selector methods, then we will use the below-mentioned methods to append the HTML code to the div.
There are two ways to append HTML code to a div through JavaScript:
Table of Content
- Using the innerHTML Attribute
- Using the insertAdjacentHTML() Method
- Using the appendChild() method
Contact Us