jQuery και χειρισμός HTML

jQuery και χειρισμός HTML

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

Αλλαγή περιεχομένου HTML

Για να αλλάξουμε το περιεχόμενο ενός στοιχείου χρησιμοποιούμε τον παρακάτω τρόπο γραφής:

$(selector).html(content);

Η μέθοδος html() αλλάξει τα περιεχόμενα των στοιχείων που έχει επιλέξει η jQuery, στην ουσία ισοδυναμεί με την innerHTML για όποιους γνωρίζουν την JavaScript.

$("p").html("iDesigner ");

To παραπάνω απόσπασμα, θα εισάγει το κείμενο iDesigner σε όλες τις παραγράφους της ιστοσελίδας.

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

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

$(selector).append(content);

$(selector).prepend(content);

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

$("p").append(" iDesigner ");

To παραπάνω απόσπασμα, θα εισάγει το κείμενο iDesigner στο τέλος όλων των παραγράφων της ιστοσελίδας.

Εισαγωγή περιεχομένου HTML

Για να εισάγουμε περιεχόμενο σε μια ιστοσελίδα χρησιμοποιούμε τον παρακάτω τρόπο γραφής:

$(selector).after(content);

$(selector).before(content);

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

$("p").after(" iDesigner ");

To παραπάνω απόσπασμα, θα εισάγει το κείμενο iDesigner μετά από κάθε παράγραφο στην ιστοσελίδα.

Για περισσότερες πληροφορίες ή για να δείτε τον πλήρη κατάλογο με τις μεθόδους που προσφέρει η jQuery, επισκεφθείτε την επίσημη ιστοσελίδα της κάνοντας κλικ εδώ.

Tags: ,

Προσθήκη σχολίου