Metoden append
Metoden append gør det muligt at indsætte et
andet element i slutningen af et element. Som parameter
tager metoden et element, som som regel er oprettet
via createElement,
eller en streng. Det er muligt at tilføje flere
elementer eller strenge på én gang ved at opremse dem adskilt af komma.
Syntaks
forælder.append(element eller streng);
Eksempel
Lad os oprette et afsnit, sætte tekst til det
og placere det på siden i slutningen af blokken #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);
Resultatet af udførelsen af koden:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Eksempel
Lad os placere flere afsnit på én gang i slutningen
af blokken #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);
Resultatet af udførelsen af koden:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Eksempel
Lad os bruge en streng som parameter for metoden:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Resultatet af udførelsen af koden:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Eksempel
Der er givet en ul.
Lad os placere 9 stk. li-tags i den,
hvor deres tekst bliver ordnumre:
<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);
}
Resultatet af udførelsen af koden:
<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>
Eksempel
Lad os fylde tabellen med tr og td:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // opretter tr
// Fylder tr med td:
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // opretter td
td.textContent = j; // skriver tekst i den
tr.append(td); // tilføjer den oprettede td i slutningen af tr
}
table.append(tr); // tilføjer den oprettede tr i slutningen af tabellen
}
Resultatet af udførelsen af koden:
<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>
Se også
-
metoden
prepend,
som indsætter elementer i begyndelsen -
metoden
appendChild,
som indsætter elementer i slutningen -
metoden
insertBefore,
som indsætter elementet før et element -
metoden
insertAdjacentElement,
som indsætter elementet på et angivet sted -
metoden
insertAdjacentHTML,
som indsætter tags på et angivet sted
