I need to have the option to add various columns to a div and furthermore eliminating them. I have a ‘+’ button at the highest point of the page which is for adding content. Then, at that point, to one side of each line there is a ‘- ‘ button that is for eliminating that very column. I can’t sort out the javascript code in this model.
Table of Contents
How to append HTML code to a div using JavaScript?
Composing HTML code is simple, yet with regards to dynamic changes over the pages like annexing HTML, you really want to utilize uncommon techniques. JavaScript is a strong language to finish such sorts of occupations. You can without much of a stretch use JavaScript to put the HTML code inside the format. We will talk about this in this review.
There are two methods for annexing HTML code to a div through JavaScript
- Utilizing the innerHTML characteristic
- Utilizing the insertAdjacentHTML() strategy
Utilizing the innerHTML characteristic:
To annex utilizing the innerHTML trait, first select the component (div) where you need to affix the code. Then, at that point, add the code encased as strings utilizing the += administrator 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> |
Output:
eevibes
Note: This strategy fundamentally annihilates all the substance of the div and reproduces it. Along these lines, assuming you have any audience members joined to the youngster hubs of that div, they will be lost.
Utilizing the insertAdjacentHTML() technique
HTML code can be attached to a div utilizing the insertAdjacentHTML() strategy. Be that as it may, you really want to choose a component inside the div to add the code. This strategy takes two boundaries:
The situation (in the record) where you need to embed the code (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’)
The HTML code you need to embed encased in statements
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> |
Output:
eevibes
Note: You ought to never embed the HTML code along these lines assuming you are accepting it as a contribution from the client. It opens your site to cross-site prearranging weaknesses.
JavaScript is most popular for site page improvement yet it is likewise utilized in an assortment of non-program conditions. You can gain JavaScript from the beginning by following this JavaScript Tutorial and JavaScript Examples.
Also Read: Returning Multiple values in Java