How to append HTML code to a div using JavaScript ? - GeeksforGeeks

20 Jul, 2021
There are two ways to append HTML code to a div through JavaScript
Using the innerHTML attribute
Using the insertAdjacentHTML() method
Using the innerHTML attribute:To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.
Syntax:
element.innerHTML += "additional HTML code"

or
element.innerHTML = element.innerHTML + "additional HTML code"

Example:
<!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>
Before Clicking the Button:
After Clicking the Button: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.Using the insertAdjacentHTML() methodHTML code can be appended to a div 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 enclosed in quotesSyntax:elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');
Example:<!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:Before Clicking the Button:After Clicking the Button:Note:You should never insert the HTML code in this way if you are taking it as an 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.Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
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.
Using the insertAdjacentHTML() method
HTML code can be appended to a div 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 enclosed in quotes
The position (in the document) where you want to insert the code (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’)
The HTML code you want to insert enclosed in quotes
Syntax:
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');

Example:
<!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>
Before Clicking the Button:
After Clicking the Button:Note:You should never insert the HTML code in this way if you are taking it as an 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.Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
Note:You should never insert the HTML code in this way if you are taking it as an 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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
JacobAntony1
HTML-Attributes
Picked
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Difference Between PUT and PATCH Request
JavaScript | console.log() with Examples
How to read a local text file using JavaScript?
Node.js | fs.writeFileSync() Method
How to Use the JavaScript Fetch API to Get Data?