append Metodu

append metodu, bir elemanın sonuna başka bir eleman eklemeye izin verir. Parametre olarak genellikle createElement ile oluşturulmuş bir elemanı veya bir string'i kabul eder. Virgülle ayırarak aynı anda birden fazla eleman veya string ekleyebilirsiniz.

Sözdizimi

javascriptebeveyn.append(eleman veya string);

Örnek

Bir paragraf oluşturalım, ona metin ayarlayalım ve sayfada #parent bloğunun sonuna yerleştirelim:

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

Kodun çalıştırılmasının sonucu:

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

Örnek

Hemen birkaç paragrafı #parent bloğunun sonuna yerleştirelim:

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

Kodun çalıştırılmasının sonucu:

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

Örnek

Metodun parametresi olarak bir string kullanalım:

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

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

Kodun çalıştırılmasının sonucu:

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

Örnek

Bir ul verildi. İçine 9 tane li etiketi yerleştirelim, ve metinlerini sıra numaraları yapalım:

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

Kodun çalıştırılmasının sonucu:

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>

Örnek

Tabloyu tr'ler ve td'ler ile dolduralım:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // tr oluşturuyoruz
  
  // tr'yi td'ler ile dolduruyoruz:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // td oluşturuyoruz
    td.textContent = j; // içine metin yazıyoruz
    
    tr.append(td); // oluşturulan td'yi tr'nin sonuna ekliyoruz
  }
  
  table.append(tr); // oluşturulan tr'yi tablonun sonuna ekliyoruz
}

Kodun çalıştırılmasının sonucu:

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>

Ayrıca Bakınız