Metode append

Metode append memungkinkan untuk menyisipkan elemen lain ke akhir suatu elemen. Parameter metode menerima elemen, yang biasanya dibuat melalui createElement, atau string. Beberapa elemen atau string dapat ditambahkan sekaligus, dengan mendaftarkannya dipisahkan koma.

Sintaks

javascriptinduk.append(elemen atau string);

Contoh

Mari buat paragraf, atur teksnya dan letakkan di halaman di akhir blok #parent:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.append(p);

Hasil eksekusi kode:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>!</p>
</div>

Contoh

Mari letakkan beberapa paragraf sekaligus di akhir blok #parent:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.append(p1, p2);

Hasil eksekusi kode:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>a</p>
  <p>b</p>
</div>

Contoh

Mari gunakan string sebagai parameter metode:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
parent.append('!');

Hasil eksekusi kode:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  !
</div>

Contoh

Diberikan ul. Mari tempatkan 9 tag li di dalamnya, sementara teksnya dijadikan nomor urut:

html<ul id="parent"></ul>

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  parent.append(li);
}

Hasil eksekusi kode:

html<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

Contoh

Mari isi tabel dengan tr dan td:

html<table id="table"></table>

javascriptlet table = document.querySelector('#table');

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // membuat tr
  
  // Mengisi tr dengan td:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // membuat td
    td.textContent = j; // menulis teks ke dalamnya
    
    tr.append(td); // menambahkan td yang dibuat ke akhir tr
  }
  
  table.append(tr); // menambahkan tr yang dibuat ke akhir tabel
}

Hasil eksekusi kode:

html<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Lihat juga