Μέθοδος appendChild

Η μέθοδος appendChild επιτρέπει την εισαγωγή ενός άλλου στοιχείου στο τέλος ενός στοιχείου. Χρησιμοποιείται πιο συχνά μετά τη δημιουργία στοιχείου με τη βοήθεια της createElement.

Σύνταξη

γονέας.appendChild(στοιχείο);

Παράδειγμα

Ας δημιουργήσουμε μια παράγραφο, θα ορίσουμε το κείμενό της και θα την τοποθετήσουμε στη σελίδα στο τέλος του μπλοκ #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.appendChild(p);

Αποτέλεσμα εκτέλεσης του κώδικα:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</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.appendChild(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 parent = document.querySelector('#parent');

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.appendChild(td); // προσθέτουμε το δημιουργημένο td στο τέλος της tr
	}
	
	table.appendChild(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>

Δείτε επίσης

μέθοδος append,
που εισάγει στοιχεία στο τέλος
μέθοδος insertBefore,
που εισάγει ένα στοιχείο πριν από ένα στοιχείο
μέθοδος insertAdjacentElement,
που εισάγει ένα στοιχείο σε μια καθορισμένη θέση
μέθοδος insertAdjacentHTML,
που εισάγει ετικέτες σε μια καθορισμένη θέση