In this article, we would like to show you how to append multiple HTML elements at once using JavaScript.
Quick solution:
element.append(chlidElement1, childElement2, childElementN);Warning: append() method appeard in the major web browsers around 2016-2018.
Practical example
In this example, we create new child elements and use append() method to append them at once to the container element.
❮ jQuery HTML/CSS Methods
Example
Insert content at the end of all
elements:
$("button").click(function(){
$("p").append("Appended text");
});
Definition and Usage
The append() method inserts specified content at the end of the selected elements.
Tip: To insert content at the beginning of the selected elements, use the prepend() method.
Syntax
$(selector).append(content,function(index,html))
ParameterDescriptioncontentRequired. Specifies the content to insert (can contain HTML tags)
Possible values:
- HTML elements
- jQuery objects
- DOM elements
- index - Returns the index position of the element in the set
- html - Returns the current HTML of the selected element
Try it Yourself - Examples
append() - Create content with HTML, jQuery and DOM
Insert content with the append() method.
Append content using a function
Using a function to insert content at the end of the selected elements.
❮ jQuery HTML/CSS Methods
In today's post, I'll be taking you through 2 of my favourite ways to append multiple child elements to a parent element with the JavaScript DOM.
1. insertAdjacentHTML()
This is one of the most underrated methods in JavaScript. You can use insertAdjacentHTML() to insert an HTML string at a specified position relative to a parent element.
It supports a total of 4 positions, but the one we're interested in for appending elements is beforeend (insert before the end of the parent element).
Let's see it in action.
/* HTML: <ul id="fruit"> <li>Apple</li> <li>Banana</li> </ul> */ const fruitList = document.getElementById("fruit"); // Add 3 new <li>'s to the list of fruits fruitList.insertAdjacentHTML("beforeend", ` <li>Pear</li> <li>Orange</li> <li>Grape</li> `);
Enter fullscreen mode Exit fullscreen mode
As you can see, it's easy to append multiple elements using plain HTML. To make it even simpler, you can use template literals to take advantage of multi-line HTML as I've done above 👆
2. append()
The above technique uses HTML strings, but what if you wanted to build the DOM elements manually? Sometimes, doing it this way makes it easy to add event listeners or perform operations on the elements.
Let's explore the same example as above, this time using the append() method which works like appendChild() but lets you pass in multiple items.
/* HTML: <ul id="fruit"> <li>Apple</li> <li>Banana</li> </ul> */ const fruitList = document.getElementById("fruit"); const pearListItem = document.createElement("li"); const orangeListItem = document.createElement("li"); const grapeListItem = document.createElement("li"); pearListItem.textContent = "Pear"; orangeListItem.textContent = "Orange"; grapeListItem.textContent = "Grape"; // Add 3 new <li>'s to the list of fruits fruitList.append(pearListItem, orangeListItem, grapeListItem);
Enter fullscreen mode Exit fullscreen mode
It's also worth noting that the append() method also lets you pass in text nodes or plain-text strings.
If you have any other techniques, please leave them down below!
Enrol Now 👉 JavaScript DOM Crash Course
You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇
//www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1