Προσθήκη στοιχείων μέσω του jQuery

Με τη χρήση του jQuery, είναι πολύ εύκολο να προσθέσουμε νέα στοιχεία/περιεχόμενο.

Προσθήκη νέου HTML περιεχομένου

Θα μάθουμε για τις τέσσερις μεθόδους του jQuery που χρησιμοποιούνται για την προσθήκη νέου περιεχομένου:

  • append() - Προσθήκη περιεχομένου στο τέλος του επιλεγμένου στοιχείου
  • prepend() - Προσθήκη περιεχομένου στην αρχή του επιλεγμένου στοιχείου
  • after() - Προσθήκη περιεχομένου μετά από το επιλεγμένο στοιχείο
  • before() - Προσθήκη περιεχομένου πριν από το επιλεγμένο στοιχείο

Η μέθοδος append() του jQuery

Η μέθοδος append() του jQuery προσθέτει περιεχόμενο στο τέλος του επιλεγμένου στοιχείου.

Παράδειγμα

$("p").append("Κάποιο προσαρμοσμένο κείμενο.");

Δοκιμάστε το προσωπικά

Η μέθοδος prepend() του jQuery

Η μέθοδος prepend() του jQuery προσθέτει περιεχόμενο στην αρχή του επιλεγμένου στοιχείου.

Παράδειγμα

$("p").prepend("Κάποιο προπεντεμένο κείμενο.");

Δοκιμάστε το προσωπικά

Προσθήκη αρκετών νέων στοιχείων μέσω των μεθόδων append() και prepend()

Στο παραπάνω παράδειγμα, προσθέτουμε κείμενο/HTML μόνο στην αρχή/τέλος του επιλεγμένου στοιχείου.

Ωστόσο, οι μεθόδους append() και prepend() μπορούν να δεχθούν απεριόριστο αριθμό νέων στοιχείων. Μπορούν να δημιουργηθούν κείμενο/HTML μέσω του jQuery (όπως στο παραπάνω παράδειγμα) ή μέσω κώδικα JavaScript και στοιχείων DOM.

Στο παρακάτω παράδειγμα, δημιουργούμε αρκετά νέα στοιχεία. Αυτά τα στοιχεία μπορούν να δημιουργηθούν μέσω text/HTML, jQuery ή JavaScript/DOM και στη συνέχεια να προστίθενται στο κείμενο μέσω της μεθόδου append() (το ίδιο ισχύει και για την prepend()):

Παράδειγμα

function appendText()
{
var txt1="<p>Τекст.</p>";               // Με τη χρήση HTML να δημιουργούμε νέο στοιχείο
var txt2=$("<p></p>").text("Τекст.");   // Με τη χρήση του jQuery να δημιουργούμε νέο στοιχείο
var txt3=document.createElement("p");  // Δημιουργεί νέο στοιχείο μέσω DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Προσθέτει νέο στοιχείο
{}

Δοκιμάστε το προσωπικά

Μεθόδους after() και before() του jQuery

Η μέθοδος after() του jQuery εισάγει περιεχόμενο μετά από τον επιλεγμένο στοιχείο.

Η μέθοδος before() του jQuery εισάγει περιεχόμενο πριν από τον επιλεγμένο στοιχείο.

Παράδειγμα

$("img").after("Κείμενο μετά");
$("img").before("Κείμενο πριν");

Δοκιμάστε το προσωπικά

Προσθήκη νέων στοιχείων μέσω after() και before()

Οι μεθόδους after() και before() μπορούν να δεχτούν απεριόριστο αριθμό νέων στοιχείων. Τα νέα στοιχεία μπορούν να δημιουργηθούν μέσω text/HTML, jQuery ή JavaScript/DOM.

Στο παρακάτω παράδειγμα δημιουργούμε αρκετά νέα στοιχεία. Αυτά τα στοιχεία μπορούν να δημιουργηθούν μέσω text/HTML, jQuery ή JavaScript/DOM. Στη συνέχεια, εισάγουμε αυτά τα νέα στοιχεία στον κείμενο με τη μέθοδο after() (για before() ισχύει το ίδιο):

Παράδειγμα

function afterText()
{
var txt1="<b>I </b>";                    // Δημιουργεί νέο στοιχείο μέσω HTML
var txt2=$("<i></i>").text("love ");     // Δημιουργεί νέο στοιχείο μέσω jQuery
var txt3=document.createElement("big");  // Δημιουργεί νέο στοιχείο μέσω DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Εισάγει νέο στοιχείο μετά το img
{}

Δοκιμάστε το προσωπικά

Κατάλογος αναφορών jQuery HTML

Για πλήρη περιγραφή των μεθόδων jQuery HTML, επισκεφθείτε τον παρακάτω κατάλογο αναφορών: