Metoda append

Metoda append umożliwia wstawienie na koniec danego elementu innego elementu. Jako parametr metoda przyjmuje element, zazwyczaj utworzony za pomocą createElement, lub ciąg znaków. Można dodać od razu kilka elementów lub ciągów, wymieniając je przez przecinek.

Składnia

javascriptrodzic.append(element lub ciąg znaków);

Przykład

Stwórzmy akapit, ustawmy mu tekst i umieśćmy na stronie na końcu 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);

Wynik wykonania kodu:

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

Przykład

Umieśćmy od razu kilka akapitów na końcu 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);

Wynik wykonania kodu:

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

Przykład

Użyjmy jako parametru metody ciągu znaków:

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

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

Wynik wykonania kodu:

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

Przykład

Dany jest ul. Umieśćmy w nim 9 tagów li, przy czym ich tekstem uczyńmy numery porządkowe:

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

Wynik wykonania kodu:

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>

Przykład

Wypełnijmy tabelę tr-kami i td-kami:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // tworzymy tr-kę
  
  // Wypełniamy tr-kę td-kami:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // tworzymy td-kę
    td.textContent = j; // piszemy w niej tekst
    
    tr.append(td); // dodajemy utworzoną td-kę na koniec tr-ki
  }
  
  table.append(tr); // dodajemy utworzoną tr-kę na koniec tabeli
}

Wynik wykonania kodu:

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>

Zobacz też