Cara menggunakan append to parent javascript

The ParentNode.append() method is used to insert Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as Text nodes.

Table of Contents Show

.appendChild()
Apa itu append Javascript?
appendChild untuk apa?

Syntax:

ParentNode.append( ChildNodesToPrepend );

Parameters: This parameter holds the set of Node or DOMString objects that is to be inserted as the last child of parent element.

Below examples illustrate the ParentNode.append() method:

Example 1: In this example, we will append an element. To show this method, we have created three elements parentNode, Child1 and Child2. Then we have appended the Child1 and Child2 to parentNode.

In console, we had shown childNodes of parentNode.

HTML

<!DOCTYPE html>

<html lang="en">

<<!DOCTYPE html>0>

<!DOCTYPE html>2<<!DOCTYPE html>4 <!DOCTYPE html>5=<!DOCTYPE html>7>

<!DOCTYPE html>9<!DOCTYPE html>0>

<<4>

<!DOCTYPE html>2<<8<9<8>

<!DOCTYPE html>2<html5>

html7html8

html7lang0

html7lang2

html7lang4

html7lang6

html7lang8

<!DOCTYPE html>2<!DOCTYPE html>9html5>

<!DOCTYPE html>9<4>

<!DOCTYPE html>9html>

Output:

In console, you can see childNodeList of parentNode. One is p and one is div.

Example 2: In this example, we have appended some text to innerHTML of the element and the element’s textContent.

Keduanya merupakan method yang sering dipakai untuk memanipulasi Document Object Model (DOM). Mungkin buat kalian yang sering menggunakan method ini akan jarang menemukan perbedaan. Padahal aslinya terdapat perbedaan antara keduanya, walaupun terlihat memiliki fungsi yang sama. Berikut adalah beberapa perbedaannya

.append()

1. Digunakan untuk menambahkan element baik berupa object node maupun DOMSring. berikut contohnya:

// Menambahkan Node Object p pada div
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
// Elemen dengan nama child akan ditambahkan ke parent
// Berikut outputnya 
// <div>
//  <p></p>
// </div>

// Menambahkan DOMString
const parent = document.createElement('div');
parent.append('Teks String');
// Berikut Outputnya
// <div>Teks String</div>

2. Tidak dapat mengembalikan value, berikut ini contoh kasusnya.

const parent = document.createElement('div');
const child = document.createElement('p');
const appendValue = parent.append(child);
console.log(appendValue)
// Output: undefined

3. Perbedaan terakhir, append dapat menambahkan banyak elemen atau item sekaligus, sedangkan appendChild tidak bisa, berikut contohnya.

const parent = document.createElement('div');
const firstChild = document.createElement('p');
const secondChild = document.createElement('span');
parent.append(firstChild, secondChild);
// Output: <div><p><span></span></p></div>

.appendChild()

1. Berbeda dengan append, appendChild hanya bisa menambahkan Node Object tapi tidak bisa untuk menambahkan elemen berupa DOM String

// Menambahkan Node Object p pada div
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
// Elemen dengan nama child akan ditambahkan ke parent
// Berikut outputnya 
// <div>
//  <p></p>
// </div>

// Menambahkan DOMString
const parent = document.createElement('div');
parent.appendChild('Teks String');
// Berikut Outputnya
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': ....

2. Berbeda dengan append, appendChild dapat mengembalikan value berupa Node Object yang ditambahkan seperti contoh berikut.

const parent = document.createElement('div');
const child = document.createElement('p');
const appendChildValue = parent.append(child);
console.log(appendChildValue)
// Output: <p></p>

3. Berbeda dengan append, appendChild hanya dapat menambahkan satu child saja. Meskipun kita menambahkan banyak child, tetapi yang akan ditambahkan hanya child pertama, yang lain akan diabaikan. Berikut contohnya.

const parent = document.createElement('div');
const firstChild = document.createElement('p');
const secondChild = document.createElement('span');
parent.appendChild(firstChild, secondChild);
// Output: <div><p></p></div>

Nah sudah tahu kan perbedaannya? jadi dapat kalian pertimbangkan lagi kapan waktunya menggunakan append dan kapan waktunya menggunakan appendChild. Sekian tips javascript kali ini, jika ada salah kata atau penjelasan saya mohon maaf, sekian Wassalamualaikum, wr. wb.