Metod append

Metod append omogućava umetanje drugog elementa na kraj nekog elementa. Kao parametar metod prima element, obično kreiran preko createElement, ili string. Može se dodati odjednom više elemenata ili stringova, navodeći ih zarezom.

Sintaksa

javascriptroditelj.append(element ili string);

Primer

Hajde da kreiramo paragraf, postavimo mu tekst i smestimo na stranicu na kraj bloka #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);

Rezultat izvršenja koda:

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

Primer

Hajde da smestimo odjednom više paragrafa na kraj bloka #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);

Rezultat izvršenja koda:

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

Primer

Hajde da kao parametar metoda iskoristimo string:

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

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

Rezultat izvršenja koda:

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

Primer

Dat je ul. Hajde da u njemu smestimo 9 tagova li, pri čemu njihov tekst učinimo rednim brojevima:

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

Rezultat izvršenja koda:

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>

Primer

Hajde da popunimo tabelu tr-ovima i td-ovima:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // kreiramo tr
  
  // Popunjavamo tr td-ovima:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // kreiramo td
    td.textContent = j; // upisujemo u nju tekst
    
    tr.append(td); // dodajemo kreirani td na kraj tr
  }
  
  table.append(tr); // dodajemo kreirani tr na kraj tabele
}

Rezultat izvršenja koda:

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>

Pogledajte takođe