Методот append
Методот append овозможува вметнување на
крајот на одреден елемент на друг елемент. Како параметар
методот прифаќа елемент, кој обично е создаден
преку createElement,
или низа. Може да се додадат повеќе
елементи или низи одеднаш, со набројување преку запирка.
Синтакса
родител.append(елемент или низа);
Пример
Ајде да создадеме пасус, да поставиме текст за него
и да го поставиме на страницата на крајот од блокот #parent:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.textContent = '!';
parent.append(p);
Резултат од извршувањето на кодот:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Пример
Ајде да поставиме неколку пасуси одеднаш на крајот
од блокот #parent:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p1 = document.createElement('p');
p1.textContent = 'a';
let p2 = document.createElement('p');
p2.textContent = 'b';
parent.append(p1, p2);
Резултат од извршувањето на кодот:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Пример
Ајде да користиме низа како параметар на методот:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Резултат од извршувањето на кодот:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Пример
Даден е ul.
Ајде да поставиме во него 9 тагови li,
при што нивниот текст ќе го направиме да биде редниот број:
<ul id="parent"></ul>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let li = document.createElement('li');
li.textContent = i;
parent.append(li);
}
Резултат од извршувањето на кодот:
<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-шки:
<table id="table"></table>
let 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-ка на крајот од табелата
}
Резултат од извршувањето на кодот:
<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>
Погледнете ги исто така
-
методот
prepend,
кој вметнува елементи на почеток -
методот
appendChild,
кој вметнува елементи на крај -
методот
insertBefore,
кој вметнува елемент пред елемент -
методот
insertAdjacentElement,
кој вметнува елемент на зададено место -
методот
insertAdjacentHTML,
кој вметнува тагови на зададено место
