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
ebeveyn.append(eleman veya string);
Örnek
Bir paragraf oluşturalım, ona metin ayarlayalım
ve sayfada #parent bloğunun sonuna yerleştirelim:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.textContent = '!';
parent.append(p);
Kodun çalıştırılmasının sonucu:
<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:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let 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:
<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:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Kodun çalıştırılmasının sonucu:
<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:
<ul id="parent"></ul>
let 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:
<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:
<table id="table"></table>
let 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:
<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
-
elemanları başa ekleyen
prependmetodu -
elemanları sona ekleyen
appendChildmetodu -
bir elemanı başka bir elemandan önce ekleyen
insertBeforemetodu -
bir elemanı belirtilen yere ekleyen
insertAdjacentElementmetodu -
etiketleri belirtilen yere ekleyen
insertAdjacentHTMLmetodu
