Metoden append
Metoden append lar deg sette inn et
element på slutten av et annet element. Metoden tar som parameter
et element, som vanligvis er opprettet
via createElement,
eller en streng. Du kan legge til flere
elementer eller strenger samtidig ved å oppgi dem separert med komma.
Syntaks
forelder.append(element eller streng);
Eksempel
La oss opprette et avsnitt, sette teksten til det
og plassere det på siden på slutten av 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 av kjøring av koden:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Eksempel
La oss plassere flere avsnitt samtidig på slutten
av 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 av kjøring av koden:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Eksempel
La oss bruke 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 av kjøring av koden:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Eksempel
Det er gitt en ul.
La oss plassere 9 stk. li-tagger i den,
og gjøre rekkefølgen til deres tekst:
<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 av kjøring av 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
La oss fylle tabellen med tr-er og td-er:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // oppretter tr
// Fyller tr med td-er:
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // oppretter td
td.textContent = j; // skriver tekst til den
tr.append(td); // legger til den opprettede td-en på slutten av tr-en
}
table.append(tr); // legger til den opprettede tr-en på slutten av tabellen
}
Resultatet av kjøring av 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 setter inn elementer i begynnelsen -
metoden
appendChild,
som setter inn elementer på slutten -
metoden
insertBefore,
som setter inn et element før et element -
metoden
insertAdjacentElement,
som setter inn et element på et angitt sted -
metoden
insertAdjacentHTML,
som setter inn tagger på et angitt sted
