Η μέθοδος prepend

Η μέθοδος prepend επιτρέπει την εισαγωγή στην αρχή ενός στοιχείου ενός άλλου στοιχείου. Ως παράμετρο παίρνει ένα στοιχείο, που γενικά δημιουργείται μέσω createElement, ή μια συμβολοσειρά. Μπορούν να προστεθούν αμέσως πολλά στοιχεία ή συμβολοσειρές, αναφέροντάς τα χωρισμένα με κόμμα.

Σύνταξη

γονέας.prepend(στοιχείο ή συμβολοσειρά);

Παράδειγμα

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

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

<div id="parent">
	<p>!</p>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Παράδειγμα

Ας τοποθετήσουμε αμέσως πολλές παραγράφους στην αρχή του μπλοκ #parent:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

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

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.prepend(p1, p2);

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

<div id="parent">
	<p>b</p>
	<p>a</p>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Παράδειγμα

Ας χρησιμοποιήσουμε ως παράμετρο της μεθόδου μια συμβολοσειρά:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

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

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

<div id="parent">
	!
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Δείτε επίσης

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