Metoda append

Metoda append umožňuje vložit na konec nějakého elementu jiný element. Jako parametr přijímá element, obvykle vytvořený pomocí createElement, nebo řetězec. Je možné přidat několik elementů nebo řetězců najednou, stačí je vyjmenovat oddělené čárkou.

Syntaxe

javascriptrodič.append(prvek nebo řetězec);

Příklad

Vytvořme odstavec, nastavme mu text a umístěme jej na stránku na konec 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ýsledek provedení kódu:

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

Příklad

Vložme několik odstavců najednou na konec 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ýsledek provedení kódu:

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

Příklad

Použijme jako parametr metody řetězec:

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

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

Výsledek provedení kódu:

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

Příklad

Je dán ul. Umístěme do něj 9 tagů li, přičemž jejich textem budou pořadová čí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ýsledek provedení 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>

Příklad

Vyplňme tabulku 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'); // vytvoříme tr-ku
  
  // Naplníme tr-ku td-čkami:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // vytvoříme td-čku
    td.textContent = j; // napíšeme do ní text
    
    tr.append(td); // přidáme vytvořenou td-čku na konec tr-ky
  }
  
  table.append(tr); // přidáme vytvořenou tr-ku na konec tabulky
}

Výsledek provedení 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>

Viz také