Η μέθοδος 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,
που εισάγει ετικέτες σε μια καθορισμένη θέση
