What is the append() Method in JavaScript

Suppose you want to make a list and add several elements. It consumes a large amount of time in case of doing it manually. To do so, JavaScript provides the “append()” method for taking an object as an argument and then inserting them at the end of the defined list. Furthermore, you can also append the elements differently, as in the list or in paragraph form.

This post has stated the method for finding an object id in an array of JavaScript objects.

What is the append() Method in JavaScript?

The “append()” method in JavaScript is utilized for inserting the elements or string objects at the element’s end. This is one of the most useful methods to add the required element at the specified position at the element’s end.

How to Use the append() Method in JavaScript?

To utilize the append() function in JavaScript, follow the stated syntax mentioned below:

＄(selector).append(content, function(index, html))

Here:

“selector” is the HTML element that is accessed.
“append()” method is used to append the element.
“content” is the required parameter, which determines the data content to append.
“function()” is an optional element.

Example 1: Append Same Element in Paragraph

To append the same elements in a paragraph, first, open up the relevant HTML page and utilize the “<p>” tag to embed data in between the tag. Furthermore, assign an “id” to the paragraph to access it in JavaScript:

<p id="element">Welcome to Linuxhint</p>

Next, create a button with the help of the “<button>” element and use the “class” attribute to specify a particular name and embed text with button element to display on the button:

<button class="btn">Append Element</button>

Now, utilize the “<script>” tag to add the JavaScript code:

According to the given code:

“ready()” method is utilized for making a function available when the document is loaded on the screen successfully. To do so, pass the “function()” method as the parameter.
“click()” method invokes when the user clicks on the HTML button element. This method determines the execution of the click when a user hits the button.
“append()” method inserts a set of objects after execution of the “click()” method. For that purpose, pass the text that needs to append.

Output

Example 2: Append Different Elements in List Form

You can append the different elements in the form of a list. To do so, make an HTML page and embed text with the help of the “<p>” tag:

<p id="append">JavaScript Append() Function</p>

Make a button using the “<button>” element and use the “onclick” event that occurs when a user clicks on an HTML element:

<button onclick="func()">Append Elements</button>

Make a div container and assign an id to that container by using the “id” attribute. Next, add the elements with the help of the “<p>” tag:

<div id="more-element">

<p>Element 1</p>

<p>Element 2</p>

</div>

Next, used the “<script>” tag and add the following code in between the tag:

In the above-stated code:

Declare a variable using the “var” keyword and assign a value to it according to your preference.
Define a function and initialize another variable inside the defined function with a particular name.
Then, invoke the “getElementById()” JavaScript method to access the element and pass the id value as the parameter.
“insertAdjacentHTML()” method is utilized for adding the HTML code into a specified position and adding the element adjacent to each other.
Utilize the increment operator to make an increment in the element:

You have learned about the usage of the append() method in JavaScript with various examples.

Conclusion

“append()” is a JavaScript method that is utilized for inserting the element and objects at the end of the defined element. You can append the same element and different elements in the form of paragraphs and lists. More specifically, it can be triggered on a button click. This post has demonstrated the append() method in JavaScript.

What is the append() Method in JavaScript