- 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.
element.innerHTML += "additional HTML code" // OR element.innerHTML = element.innerHTML + "additional HTML code"
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 is enclosed in quotes
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');
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.
Please Login to comment...