Cara menggunakan append multiple child javascript

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))

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 👇

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Apa fungsi append pada javascript?

Apa itu append Child?

Apa kegunaan append?

Apa yang dimaksud dengan append?