Metóda append

Metóda append umožňuje vložiť na koniec nejakého prvku iný prvok. Parametrom metódy je prvok, zvyčajne vytvorený cez createElement, alebo reťazec. Je možné pridať naraz viacero prvkov alebo reťazcov, uvedením ich oddelených čiarkou.

Syntax

javascriptrodič.append(prvok alebo reťazec);

Príklad

Vytvorme odsek, nastavme mu text a umiestnime ho na stránku na koniec bloku #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);

Výsledok vykonania kódu:

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

Príklad

Umiestnime naraz niekoľko odsekov na koniec bloku #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);

Výsledok vykonania kódu:

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

Príklad

Použime ako parameter metódy reťazec:

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

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

Výsledok vykonania kódu:

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

Príklad

Daný je ul. Umiestnime do neho 9 elementov li, pričom ich textom urobme poradové čísla:

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

Výsledok vykonania kódu:

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>

Príklad

Vyplňme tabuľku tr-kami a td-kami:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // vytvoríme tr-ku
  
  // Naplníme tr-ku td-kami:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // vytvoríme td-ku
    td.textContent = j; // napíšeme do nej text
    
    tr.append(td); // pridáme vytvorenú td-ku na koniec tr-ky
  }
  
  table.append(tr); // pridáme vytvorenú tr-ku na koniec tabuľky
}

Výsledok vykonania kódu:

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>

Pozrite tiež