Die append metode

Die metode append laat toe om 'n ander element aan die einde van 'n element in te voeg. Die parameter van die metode is 'n element, gewoonlik geskep deur createElement, of 'n string. Jy kan verskeie elemente of stringe gelyktydig byvoeg deur hulle met kommas te skei.

Sintaksis

javascriptouer.append(element of string);

Voorbeeld

Kom ons skep 'n paragraaf, stel die teks daarin en plaas dit op die bladsy aan die einde van die blok #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);

Resultaat van die kode-uitvoering:

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

Voorbeeld

Kom ons plaas verskeie paragrawe gelyktydig aan die einde van die blok #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);

Resultaat van die kode-uitvoering:

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

Voorbeeld

Kom ons gebruik 'n string as die parameter van die metode:

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

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

Resultaat van die kode-uitvoering:

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

Voorbeeld

Daar word 'n ul gegee. Kom ons plaas 9 li etikette daarin, terwyl hulle se teks die volgnommers is:

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 die kode-uitvoering:

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

Kom ons vul die tabel met tr-reëls en td-selle:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // skep 'n tr-reël
  
  // Vul die tr-reël met td-selle:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // skep 'n td-sel
    td.textContent = j; // skryf teks daarin
    
    tr.append(td); // voeg die geskepde td-sel aan die einde van die tr-reël
  }
  
  table.append(tr); // voeg die geskepde tr-reël aan die einde van die tabel
}

Resultaat van die kode-uitvoering:

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>

Sien ook