Η μέθοδος insertBefore

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

Σύνταξη

γονέας.insertBefore(στοιχείο, πριν από ποιον να εισαχθεί);

Παράδειγμα

Ας δημιουργήσουμε μια παράγραφο και ας τοποθετήσουμε πριν από τη δεύτερη παράγραφο:

<div id="parent">
	<p>στοιχείο 1</p>
	<p id="before">στοιχείο 2</p>
	<p>στοιχείο 3</p>
</div>

let parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

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

<div id="parent">
	<p>στοιχείο 1</p>
	<p>!</p>
	<p id="before">στοιχείο 2</p>
	<p>στοιχείο 3</p>
</div>

Παράδειγμα

Ας προσθέσουμε μια παράγραφο στην αρχή του στοιχείου #parent. Για αυτό, θα εισάγουμε την παράγραφο μας πριν από το πρώτο παιδί #parent. Αυτό το παιδί μπορεί να βρεθεί με τη βοήθεια του firstElementChild:

<div id="parent">
	<p>στοιχείο 1</p>
	<p>στοιχείο 2</p>
</div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

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

<div id="parent">
	<p>!</p>
	<p>στοιχείο 1</p>
	<p>στοιχείο 2</p>
</div>

Παράδειγμα

Όταν μεταβιβάζεται η δεύτερη παράμετρος null, η μέθοδος insertBefore λειτουργεί ως appendChild. Ταυτόχρονα, εάν ένα στοιχείο δεν έχει θυγατρικά στοιχεία, το firstElementChild επιστρέφει null. Συνεπώς, η προσθήκη στην αρχή ενός στοιχείου μπορεί να γίνει ακόμη και όταν δεν υπάρχουν θυγατρικά στοιχεία:

<div id="parent"></div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

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

<div id="parent">
	<p>!</p>
</div>

Δείτε επίσης

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