Az append metódus
A append metódus lehetővé teszi egy
elem végére egy másik elem beszúrását. A metódus paramétere
egy elem, általában a
createElement
segítségével létrehozva, vagy egy sztring. Több elemet
vagy sztringet is hozzáadhatunk egyszerre, vesszővel elválasztva.
Szintaxis
szülő.append(elem vagy sztring);
Példa
Hozzunk létre egy bekezdést, állítsuk be a szövegét
és helyezzük el az oldalon a #parent blokk végére:
<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);
A kód végrehajtásának eredménye:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Példa
Helyezzünk el több bekezdést egyszerre a
#parent blokk végén:
<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);
A kód végrehajtásának eredménye:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Példa
Használjunk a metódus paramétereként sztringet:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
A kód végrehajtásának eredménye:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Példa
Adott egy ul.
Helyezzünk el benne 9 db li
elemet, a sorszámukat szövegükké téve:
<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);
}
A kód végrehajtásának eredménye:
<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>
Példa
Töltsük meg a táblázatot tr-ekkel és td-kkel:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // létrehozunk egy tr-t
// Td-kkel töltjük meg a tr-t:
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // létrehozunk egy td-t
td.textContent = j; // írunk bele szöveget
tr.append(td); // hozzáadjuk a létrehozott td-t a tr végéhez
}
table.append(tr); // hozzáadjuk a létrehozott tr-t a táblázat végéhez
}
A kód végrehajtásának eredménye:
<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>
Lásd még
-
a
prependmetódus,
amely elemeket szúr be az elejére -
a
appendChildmetódus,
amely elemeket szúr be a végére -
a
insertBeforemetódus,
amely egy elemet szúr be egy elem elé -
a
insertAdjacentElementmetódus,
amely egy elemet szúr be egy megadott helyre -
a
insertAdjacentHTMLmetódus,
amely HTML elemeket szúr be egy megadott helyre
