Methode append

Die Methode append ermöglicht das Einfügen eines anderen Elements am Ende eines beliebigen Elements. Als Parameter akzeptiert die Methode ein Element, in der Regel erstellt über createElement, oder einen String. Es können mehrere Elemente oder Strings gleichzeitig hinzugefügt werden, indem sie durch Kommas getrennt aufgelistet werden.

Syntax

javascriptEltern.append(Element oder String);

Beispiel

Lassen Sie uns einen Absatz erstellen, ihm Text setzen und ihn am Ende des Blocks #parent auf der Seite platzieren:

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

Ergebnis der Codeausführung:

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

Beispiel

Lassen Sie uns mehrere Absätze gleichzeitig am Ende des Blocks #parent platzieren:

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

Ergebnis der Codeausführung:

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

Beispiel

Lassen Sie uns einen String als Parameter der Methode verwenden:

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

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

Ergebnis der Codeausführung:

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

Beispiel

Gegeben ist ein ul. Lassen Sie uns 9 li-Tags darin platzieren, wobei ihr Text die Ordnungszahlen sein sollen:

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

Ergebnis der Codeausführung:

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>

Beispiel

Lassen Sie uns eine Tabelle mit tr-Elementen und td-Elementen füllen:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // tr erstellen
  
  // tr mit td-Elementen füllen:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // td erstellen
    td.textContent = j; // Text hineinschreiben
    
    tr.append(td); // erstelltes td am Ende der tr hinzufügen
  }
  
  table.append(tr); // erstellte tr am Ende der Tabelle hinzufügen
}

Ergebnis der Codeausführung:

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>

Siehe auch