Μέθοδος insertAdjacentHTML

Η μέθοδος insertAdjacentHTML επιτρέπει την εισαγωγή μιας συμβολοσειράς κώδικα HTML σε οποιοδήποτε σημείο της σελίδας. Ο κώδικας εισάγεται σε σχέση με ένα στοιχείο αναφοράς. Μπορείτε να κάνετε εισαγωγή πριν από το στοιχείο αναφοράς (τρόπος εισαγωγής 'beforeBegin'), μετά από αυτό (τρόπος εισαγωγής 'afterEnd'), καθώς και στην αρχή (τρόπος εισαγωγής 'afterBegin') ή στο τέλος (τρόπος εισαγωγής 'beforeEnd') του στοιχείου αναφοράς.

Σύνταξη

στοιχείο αναφοράς.insertAdjacentHTML(τρόπος εισαγωγής, κώδικας για εισαγωγή);

Παράδειγμα . Τρόπος beforeBegin

Ας υποθέσουμε ότι το στοιχείο αναφοράς είναι το στοιχείο #target. Ας εισάγουμε μια νέα παράγραφο πριν από αυτό:

<div id="target">
	<p>στοιχείο</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

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

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

Παράδειγμα . Τρόπος afterEnd

Τώρα ας εισάγουμε μια νέα παράγραφο μετά το στοιχείο αναφοράς:

<div id="target">
	<p>στοιχείο</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

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

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

Παράδειγμα . Τρόπος afterBegin

Ας εισάγουμε μια νέα παράγραφο στην αρχή του στοιχείου αναφοράς:

<div id="target">
	<p>στοιχείο</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

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

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

Παράδειγμα . Τρόπος beforeEnd

Ας εισάγουμε μια νέα παράγραφο στο τέλος του στοιχείου αναφοράς:

<div id="target">
	<p>στοιχείο</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

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

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

Δείτε επίσης

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