Μέθοδος insertAdjacentElement
Η μέθοδος insertAdjacentElement επιτρέπει
την εισαγωγή ενός στοιχείου σε οποιοδήποτε σημείο της σελίδας.
Χρησιμοποιείται συχνότερα μετά τη δημιουργία ενός στοιχείου
με τη βοήθεια του createElement.
Ο κώδικας εισάγεται σε σχέση με το στοιχείο
αναφοράς. Μπορείτε να κάνετε εισαγωγή πριν
από το στοιχείο αναφοράς (τρόπος εισαγωγής beforeBegin),
μετά από αυτό (τρόπος εισαγωγής afterEnd),
καθώς και στην αρχή (τρόπος εισαγωγής afterBegin)
ή στο τέλος (τρόπος εισαγωγής beforeEnd)
του στοιχείου αναφοράς.
Σύνταξη
στοιχείο αναφοράς.insertAdjacentElement(τρόπος εισαγωγής, κώδικας για εισαγωγή);
Παράδειγμα . Τρόπος beforeBegin
Ας υποθέσουμε ότι το στοιχείο αναφοράς είναι το στοιχείο #target.
Ας εισάγουμε πριν από αυτό μια νέα παράγραφο:
<div id="target">
<p>στοιχείο</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Αποτέλεσμα εκτέλεσης του κώδικα:
<p>!</p>
<div id="target">
<p>στοιχείο</p>
</div>
Παράδειγμα . Τρόπος afterEnd
Τώρα ας εισάγουμε μια νέα παράγραφο μετά το στοιχείο αναφοράς:
<div id="target">
<p>στοιχείο</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Αποτέλεσμα εκτέλεσης του κώδικα:
<div id="target">
<p>στοιχείο</p>
</div>
<p>!</p>
Παράδειγμα . Τρόπος afterBegin
Ας εισάγουμε μια νέα παράγραφο στην αρχή του στοιχείου αναφοράς:
<div id="target">
<p>στοιχείο</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Αποτέλεσμα εκτέλεσης του κώδικα:
<div id="target">
<p>!</p>
<p>στοιχείο</p>
</div>
Παράδειγμα . Τρόπος beforeEnd
Ας εισάγουμε μια νέα παράγραφο στο τέλος του στοιχείου αναφοράς:
<div id="target">
<p>στοιχείο</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Αποτέλεσμα εκτέλεσης του κώδικα:
<div id="target">
<p>στοιχείο</p>
<p>!</p>
</div>
Δείτε επίσης
-
η μέθοδος
insertAdjacentHTML,
που εισάγει ετικέτες σε μια καθορισμένη θέση -
η μέθοδος
insertAdjacentText,
που εισάγει κείμενο σε μια καθορισμένη θέση -
η μέθοδος
prepend,
που εισάγει στοιχεία στην αρχή -
η μέθοδος
append,
που εισάγει στοιχεία στο τέλος -
η μέθοδος
appendChild,
που εισάγει στοιχεία στο τέλος του γονέα -
η μέθοδος
insertBefore,
που εισάγει στοιχεία πριν από ένα στοιχείο
