Njia ya append
Njia append inaruhusu kuingiza
mwisho wa kipengele fulani kipengele kingine. Kigezo cha
njia huchukua kipengele, kwa kawaida kilichoundwa
kupitia createElement,
au mfuatano wa herufi. Inaweza kuongezwa mara moja vipengele
viwili au zaidi au mifuatano ya herufi, kwa kuviorodhesha kwa kutumia koma.
Sintaksia
mzazi.append(kipengele au mfuatano wa herufi);
Mfano
Wacha tuunde aya, tuiweke maandishi
na tuiweke kwenye ukurasa mwishoni mwa kizuizi #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);
Matokeo ya utekelezaji wa kodi:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Mfano
Wacha tuweke aya kadhaa mara moja mwishoni
wa kizuizi #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);
Matokeo ya utekelezaji wa kodi:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Mfano
Wacha tutumie mfuatano wa herufi kama kigezo cha njia:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Matokeo ya utekelezaji wa kodi:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Mfano
Ametolewa ul.
Wacha tuitie ndani yake vitendi 9 vya li,
wakati maandishi yake tufanye kuwe nambari za mpangilio:
<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);
}
Matokeo ya utekelezaji wa kodi:
<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>
Mfano
Wacha tujaze jedwali tr na td:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // kuunda tr
// Kujaza tr kwa td:
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // kuunda td
td.textContent = j; // kuandika ndani yake maandishi
tr.append(td); // kuongeza td iliyoundwa mwishoni mwa tr
}
table.append(tr); // kuongeza tr iliyoundwa mwishoni mwa jedwali
}
Matokeo ya utekelezaji wa kodi:
<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>
Angalia pia
-
njia
prepend,
ambayo inaingiza vipengele mwanzo -
njia
appendChild,
ambayo inaingiza vipengele mwishoni -
njia
insertBefore,
ambayo inaingiza kipengele kabla ya kipengele -
njia
insertAdjacentElement,
ambayo inaingiza kipengele mahali paliopangwa -
njia
insertAdjacentHTML,
ambayo inaingiza vitendi mahali paliopangwa
