De append methode

De methode append maakt het mogelijk om aan het einde van een element een ander element in te voegen. Als parameter accepteert de methode een element, meestal gemaakt via createElement, of een string. Het is mogelijk om meerdere elementen of strings tegelijk toe te voegen, door ze gescheiden door komma's op te sommen.

Syntaxis

javascriptouder.append(element of string);

Voorbeeld

Laten we een alinea maken, er tekst instellen en deze aan het einde van het blok #parent op de pagina plaatsen:

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

Resultaat van de code:

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

Voorbeeld

Laten we meerdere alinea's tegelijk aan het einde van het blok #parent plaatsen:

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

Resultaat van de code:

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

Voorbeeld

Laten we een string gebruiken als parameter voor de methode:

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

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

Resultaat van de code:

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

Voorbeeld

Er is een ul. Laten we er 9 li tags in plaatsen, en hun tekst de volgnummers maken:

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

Resultaat van de code:

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>

Voorbeeld

Laten we een tabel vullen met tr's en td's:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // maak een tr
  
  // Vul de tr met td's:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // maak een td
    td.textContent = j; // schrijf er tekst in
    
    tr.append(td); // voeg de gemaakte td toe aan het einde van de tr
  }
  
  table.append(tr); // voeg de gemaakte tr toe aan het einde van de tabel
}

Resultaat van de code:

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>

Zie ook