Metoda append
Metoda append lejon futjen e një elementi tjetër
në fund të një elementi. Si parametër
merr një element, që zakonisht krijohet
përmes createElement,
ose një varg. Mund të shtohen disa
elemente ose vargje menjëherë, duke i numëruar ato përmes presjeje.
Sintaksa
prind.append(element ose varg);
Shembull
Le të krijojmë një paragraf, t'i caktojmë tekst
dhe ta vendosim në faqe në fund të bllokut #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);
Rezultati i ekzekutimit të kodit:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Shembull
Le të vendosim disa paragrafë menjëherë në fund
të bllokut #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);
Rezultati i ekzekutimit të kodit:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Shembull
Le të përdorim një varg si parametër të metodës:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Rezultati i ekzekutimit të kodit:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Shembull
Është dhënë ul.
Le të vendosim në të 9 tagje li,
duke i bërë numrat rendorë tekstin e tyre:
<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);
}
Rezultati i ekzekutimit të kodit:
<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>
Shembull
Le të mbushim tabelën me tr- dhe td-:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // krijojmë tr-në
// E mbushim tr-në me td-:
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // krijojmë td-në
td.textContent = j; // shkruajmë tekst në të
tr.append(td); // shtojmë td-në e krijuar në fund të tr-së
}
table.append(tr); // shtojmë tr-në e krijuar në fund të tabelës
}
Rezultati i ekzekutimit të kodit:
<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>
Shihni gjithashtu
-
metoda
prepend,
që fut elementet në fillim -
metoda
appendChild,
që fut elementet në fund -
metoda
insertBefore,
që fut elementin përpara një elementi -
metoda
insertAdjacentElement,
që fut elementin në një vend të caktuar -
metoda
insertAdjacentHTML,
që fut tagjet në një vend të caktuar
