Метод 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,
който вмъква тагове на зададено място
