Метод append

Метод append омогућава уметање другог елемента на крај неког елемента. Параметром метод прихвата елемент, обично креиран преко createElement, или стринг. Могуће је додати одмах неколико елемената или стрингова, набрајањем их преко зареза.

Синтакса

javascriptродитељ.append(елемент или стринг);

Пример

Хајде да креирамо пасус, поставимо му текст и сместимо на страницу на крај блока #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);

Резултат извршавања кода:

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

Пример

Хајде да сместимо одмах неколико пасуса на крај блока #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);

Резултат извршавања кода:

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

Пример

Хајде као параметар метода да искористимо стринг:

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

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

Резултат извршавања кода:

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

Пример

Дат је ul. Хајде да сместимо у њему 9 тагова li, при том њиховим текстом да направимо редне бројеве:

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

Резултат извршавања кода:

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>

Пример

Хајде да попунимо табелу tr-кама и td-шкама:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // креирамо tr-ку
  
  // Пунимо tr-ку td-шкама:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // креирамо td-шку
    td.textContent = j; // пишемо у њу текст
    
    tr.append(td); // додајемо креирану td-шку на крај tr-ке
  }
  
  table.append(tr); // додајемо креирану tr-ку на крај табеле
}

Резултат извршавања кода:

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>

Погледајте такође