Metoden append

Metoden append lar deg sette inn et element på slutten av et annet element. Metoden tar som parameter et element, som vanligvis er opprettet via createElement, eller en streng. Du kan legge til flere elementer eller strenger samtidig ved å oppgi dem separert med komma.

Syntaks

javascriptforelder.append(element eller streng);

Eksempel

La oss opprette et avsnitt, sette teksten til det og plassere det på siden på slutten av 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 av kjøring av koden:

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

Eksempel

La oss plassere flere avsnitt samtidig på slutten av 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 av kjøring av koden:

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

Eksempel

La oss bruke 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 av kjøring av koden:

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

Eksempel

Det er gitt en ul. La oss plassere 9 stk. li-tagger i den, og gjøre rekkefølgen til deres tekst:

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 av kjøring av 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

La oss fylle tabellen med tr-er og td-er:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // oppretter tr
  
  // Fyller tr med td-er:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // oppretter td
    td.textContent = j; // skriver tekst til den
    
    tr.append(td); // legger til den opprettede td-en på slutten av tr-en
  }
  
  table.append(tr); // legger til den opprettede tr-en på slutten av tabellen
}

Resultatet av kjøring av 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å