Metoden append

Metoden append låter dig infoga i slutet av ett element ett annat element. Som parameter tar metoden ett element, vanligtvis skapat via createElement, eller en sträng. Du kan lägga till flera element eller strängar på en gång genom att lista dem med komma emellan.

Syntax

javascriptförälder.append(element eller sträng);

Exempel

Låt oss skapa ett stycke, sätta text till det och placera det på sidan i slutet av blocket #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);

Resultat av utförd kod:

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

Exempel

Låt oss placera flera stycken på en gång i slutet av blocket #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);

Resultat av utförd kod:

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

Exempel

Låt oss använda en sträng som parameter för metoden:

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

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

Resultat av utförd kod:

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

Exempel

Given ul. Låt oss placera 9 stycken li-taggar i den, och göra deras text till ordningsnummer:

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

Resultat av utförd kod:

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>

Exempel

Låt oss fylla en tabell med tr och td:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // skapar tr
  
  // Fyller tr med td:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // skapar td
    td.textContent = j; // skriver text i den
    
    tr.append(td); // lägger till den skapade tdn i slutet av trn
  }
  
  table.append(tr); // lägger till den skapade trn i slutet av tabellen
}

Resultat av utförd kod:

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 även