Η μέθοδος insertBefore

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

Σύνταξη

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

Παράδειγμα

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

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

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

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

parent.insertBefore(p, before);

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

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

Παράδειγμα

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

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

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

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

parent.insertBefore(p, parent.firstElementChild);

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

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

Παράδειγμα

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

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

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

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

parent.insertBefore(p, parent.firstChild);

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

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

Δείτε επίσης