Metode append

Metode append ļauj ievietot kāda elementa beigās citu elementu. Kā parametru metode pieņem elementu, parasti izveidotu ar createElement, vai virkni. Varat pievienot uzreiz vairākus elementus vai virknes, uzskaitot tos atdalītus ar komatu.

Sintakse

javascriptvecāks.append(elements vai virkne);

Piemērs

Izveidosim rindkopu, iestatīsim tai tekstu un ievietosim lapā bloka #parent beigās:

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);

Koda izpildes rezultāts:

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

Piemērs

Ievietosim uzreiz vairākas rindkopas bloka #parent beigās:

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);

Koda izpildes rezultāts:

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

Piemērs

Izmantosim kā metodes parametru virkni:

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

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

Koda izpildes rezultāts:

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

Piemērs

Dots ul. Izvietosim tajā 9 li tagus, bet to tekstu padarīsim par kārtas numuriem:

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);
}

Koda izpildes rezultāts:

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>

Piemērs

Aizpildīsim tabulu ar tr un td elementiem:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // izveidojam tr
  
  // Aizpildām tr ar td elementiem:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // izveidojam td
    td.textContent = j; // ierakstām tajā tekstu
    
    tr.append(td); // pievienojam izveidoto td tr beigās
  }
  
  table.append(tr); // pievienojam izveidoto tr tabulas beigās
}

Koda izpildes rezultāts:

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>

Skatiet arī