Meetod append

Meetod append võimaldab lisada mõne elemendi lõppu teise elemendi. Parameetrina võtab meetod elemendi, tavaliselt loodud läbi createElement, või stringi. Saab lisada korraga mitu elementi või stringe, loetledes need komadega.

Süntaks

javascriptvanem.append(element või string);

Näide

Loome lõigu, määrame sellele teksti ja asetame lehele ploki #parent lõppu:

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

Koodi täitmise tulemus:

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

Näide

Asetame korraga mitu lõiku ploki #parent lõppu:

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

Koodi täitmise tulemus:

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

Näide

Kasutame meetodi parameetrina stringi:

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

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

Koodi täitmise tulemus:

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

Näide

Antud on ul. Asetame sinna 9 li elementi, muutes nende tekstiks järjekorranumbrid:

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

Koodi täitmise tulemus:

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>

Näide

Täidame tabeli tr-idega ja td-dega:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // loome tr-i
  
  // Täidame tr-i td-dega:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // loome td
    td.textContent = j; // kirjutame sellesse teksti
    
    tr.append(td); // lisame loodud td tr-i lõppu
  }
  
  table.append(tr); // lisame loodud tr-i tabeli lõppu
}

Koodi täitmise tulemus:

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>

Vaata ka