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

javascriptmzazi.append(kipengele au mfuatano wa herufi);

Mfano

Wacha tuunde aya, tuiweke maandishi na tuiweke kwenye ukurasa mwishoni mwa kizuizi #parent:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.append(p);

Matokeo ya utekelezaji wa kodi:

html<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:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet 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:

html<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:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
parent.append('!');

Matokeo ya utekelezaji wa kodi:

html<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:

html<ul id="parent"></ul>

javascriptlet 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:

html<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:

html<table id="table"></table>

javascriptlet 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:

html<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