Δημιουργία και Εισαγωγή Στοιχείων σε JavaScript

Τώρα θα μάθουμε να δημιουργούμε νέα DOM στοιχεία μέσω JavaScript, και στη συνέχεια να τα προσθέτουμε στη σελίδα. Για αυτόν τον σκοπό χρησιμοποιείται η μέθοδος createElement. Ως παράμετρο αυτής της μεθόδου πρέπει να μεταβιβάζεται το όνομα της ετικέτας που πρέπει να δημιουργηθεί.

Αν καταγράψουμε το αποτέλεσμα της createElement σε μια μεταβλητή, τότε σε αυτήν τη μεταβλητή θα υπάρχει ένα τέτοιο στοιχείο, σαν να το λάβαμε μέσω querySelector.

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

Για την τοποθέτηση ενός νέου στοιχείου στη σελίδα εφαρμόζεται η μέθοδος appendChild. Αυτή η μέθοδος πρέπει να εφαρμόζεται στο στοιχείο, στο οποίο θέλουμε να τοποθετήσουμε το στοιχείο μας. Και ως παράμετρο της μεθόδου πρέπει να μεταβιβάζεται το νέο μας στοιχείο, που δημιουργήθηκε προηγουμένως μέσω createElement.

Ας δούμε ένα πρακτικό παράδειγμα. Ας υποθέσουμε ότι έχουμε ένα div, και μέσα σε αυτό - πολλές παραγράφους:

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

Ας δημιουργήσουμε μια παράγραφο, ας ορίσουμε το κείμενό της και ας την τοποθετήσουμε στη σελίδα στο τέλος του μπλοκ #parent:

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>

Δίνεται ol:

<ol id="elem"></ol>

Εισάγετε στο τέλος του ένα li με κείμενο 'item'.

Δίνονται ol και ένα κουμπί:

<ol id="elem"></ol>
<button id="button">click me</button>

Κάντε έτσι ώστε με κλικ στο κουμπί στο τέλος της λίστας να προστίθεται ένα li με κείμενο 'item'.