Η μέθοδος createElement

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

Αν καταγράψουμε το αποτέλεσμα της createElement σε μια μεταβλητή, τότε σε αυτή τη μεταβλητή θα υπάρχει ένα τέτοιο στοιχείο, σαν να το λάβαμε μέσω querySelector ή getElementById. Η μόνη διαφορά - το στοιχείο μας δεν θα είναι τοποθετημένο στη σελίδα. Και έτσι μπορούμε να αλλάξουμε το innerHTML του, τα χαρακτηριστικά, να προσθέσουμε χειριστές γεγονότων και τελικά να το τοποθετήσουμε στη σελίδα.

Σύνταξη

document.createElement('όνομα ετικέτας');

Παράδειγμα

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

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

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

Παράδειγμα

Δίνεται ul. Ας τοποθετήσουμε σε αυτό 9 ετικέτες li, ενώ το κείμενό τους να γίνουν οι τακτικοί αριθμοί:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

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

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Παράδειγμα

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

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Δείτε επίσης

η μέθοδος cloneNode,
με τη βοήθεια της οποίας μπορείτε να αντιγράψετε ένα στοιχείο
η μέθοδος createTextNode,
με τη βοήθεια της οποίας μπορείτε να δημιουργήσετε έναν νέο κόμβο κειμένου