Metoda append
Metoda append permite inserarea la
sfârșitul unui element a altui element. Ca parametru,
metoda acceptă un element, în general creat
prin createElement,
sau un șir de caractere. Se pot adăuga mai multe
elemente sau șiruri de caractere deodată, enumerându-le prin virgulă.
Sintaxă
părinte.append(element sau șir);
Exemplu
Să creăm un paragraf, să-i setăm textul
și să-l plasăm pe pagină la sfârșitul blocului #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);
Rezultatul executării codului:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Exemplu
Să plasăm mai multe paragrafe deodată la sfârșitul
blocului #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);
Rezultatul executării codului:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Exemplu
Să folosim ca parametru al metodei un șir de caractere:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Rezultatul executării codului:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Exemplu
Este dat ul.
Să plasăm în el 9 tag-uri li,
în același timp făcând din textul lor numerele ordinale:
<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);
}
Rezultatul executării codului:
<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>
Exemplu
Să completăm tabelul cu tr-uri și td-uri:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // creem un rând (tr)
// Completăm rândul cu celule (td-uri):
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // creem o celulă (td)
td.textContent = j; // scriem în ea text
tr.append(td); // adăugăm celula (td) creată la sfârșitul rândului (tr)
}
table.append(tr); // adăugăm rândul (tr) creat la sfârșitul tabelului
}
Rezultatul executării codului:
<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>
Vedeți și
-
metoda
prepend,
care inserează elemente la început -
metoda
appendChild,
care inserează elemente la sfârșit -
metoda
insertBefore,
care inserează un element înaintea altui element -
metoda
insertAdjacentElement,
care inserează un element într-o locație specificată -
metoda
insertAdjacentHTML,
care inserează tag-uri într-o locație specificată
