Die append metode
Die metode append laat toe om 'n
ander element aan die einde van 'n element in te voeg. Die parameter van die
metode is 'n element, gewoonlik geskep
deur createElement,
of 'n string. Jy kan verskeie elemente
of stringe gelyktydig byvoeg deur hulle met kommas te skei.
Sintaksis
ouer.append(element of string);
Voorbeeld
Kom ons skep 'n paragraaf, stel die teks daarin
en plaas dit op die bladsy aan die einde van die blok #parent:
<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);
Resultaat van die kode-uitvoering:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Voorbeeld
Kom ons plaas verskeie paragrawe gelyktydig aan die einde
van die blok #parent:
<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);
Resultaat van die kode-uitvoering:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Voorbeeld
Kom ons gebruik 'n string as die parameter van die metode:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Resultaat van die kode-uitvoering:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Voorbeeld
Daar word 'n ul gegee.
Kom ons plaas 9 li etikette daarin,
terwyl hulle se teks die volgnommers is:
<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);
}
Resultaat van die kode-uitvoering:
<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>
Voorbeeld
Kom ons vul die tabel met tr-reëls en td-selle:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // skep 'n tr-reël
// Vul die tr-reël met td-selle:
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // skep 'n td-sel
td.textContent = j; // skryf teks daarin
tr.append(td); // voeg die geskepde td-sel aan die einde van die tr-reël
}
table.append(tr); // voeg die geskepde tr-reël aan die einde van die tabel
}
Resultaat van die kode-uitvoering:
<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>
Sien ook
-
die metode
prepend,
wat elemente aan die begin invoeg -
die metode
appendChild,
wat elemente aan die einde invoeg -
die metode
insertBefore,
wat 'n element voor 'n element invoeg -
die metode
insertAdjacentElement,
wat 'n element op 'n gespesifiseerde plek invoeg -
die metode
insertAdjacentHTML,
wat etikette op 'n gespesifiseerde plek invoeg
