How to append data to element using JavaScript

In this article, we will discuss three methods to append data to element using JavaScript. These three methods provide different ways to append data to an element using JavaScript. Depending on your specific use case and requirements, you can choose the most suitable method to dynamically update the content of your web page.

Method 1: Using innerHTML property #

This method involves directly manipulating the innerHTML property of the target element to append new data. The existing content will be overwritten with the new content.

1. Use getElementById to select the target element.
2. Create a variable newData containing the new HTML content to be appended.
3. Access the innerHTML property of the target element and use the += operator to add the new data after the existing content.

Method 2: Using insertAdjacentHTML property #

The insertAdjacentHTML method allows you to insert HTML data in relation to a specific position within the target element.

1. Select the target element using getElementById() method.
2. Create a variable newData containing the new HTML content to be appended.
3. Use insertAdjacentHTML with the beforeend position parameter to add the new data at the end of the target element.

Method 3: Using createElement and appendChild method #

This method involves creating a new element, populating it with data, and then appending it to the target element.

1. Select the target element using getElementById() method.
2. Create a variable newData containing the text content to be appended.
3. Create a new <p> element using createElement() method.
4. Set the textContent property of the new element to the newData.
5. Append the new element to the target element using appendChild() method.