Metoden append

Metoden append gør det muligt at indsætte et andet element i slutningen af et element. Som parameter tager metoden et element, som som regel er oprettet via createElement, eller en streng. Det er muligt at tilføje flere elementer eller strenge på én gang ved at opremse dem adskilt af komma.

Syntaks

javascriptforælder.append(element eller streng);

Eksempel

Lad os oprette et afsnit, sætte tekst til det og placere det på siden i slutningen af blokken #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);

Resultatet af udførelsen af koden:

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

Eksempel

Lad os placere flere afsnit på én gang i slutningen af blokken #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);

Resultatet af udførelsen af koden:

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

Eksempel

Lad os bruge en streng som parameter for metoden:

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

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

Resultatet af udførelsen af koden:

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

Eksempel

Der er givet en ul. Lad os placere 9 stk. li-tags i den, hvor deres tekst bliver ordnumre:

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

Resultatet af udførelsen af koden:

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>

Eksempel

Lad os fylde tabellen med tr og td:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // opretter tr
  
  // Fylder tr med td:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // opretter td
    td.textContent = j; // skriver tekst i den
    
    tr.append(td); // tilføjer den oprettede td i slutningen af tr
  }
  
  table.append(tr); // tilføjer den oprettede tr i slutningen af tabellen
}

Resultatet af udførelsen af koden:

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>

Se også