Δημιουργία και τυλίγμα στοιχείων στο jQuery
Πριν από το τύλιγμα με μια ετικέτα, μπορούμε πρώτα να δημιουργήσουμε
ένα στοιχείο στο έγγραφο. Ας τυλίξουμε τις παραγράφους
που παρουσιάζονται παρακάτω στις ετικέτες '<div></div>':
<p class="www">κείμενο</p>
<p class="www">κείμενο</p>
<p class="www">κείμενο</p>
<p>κείμενο</p>
Για αυτό μπορούμε να δημιουργήσουμε πρώτα ένα στοιχείο στο
έγγραφο χρησιμοποιώντας
document.createElement('div'):
$('.www').wrap(document.createElement('div'));
Ή:
let div = document.createElement("div");
$('.www').wrap(div);
Ως παράμετρο μπορούμε να περάσουμε όχι μόνο το όνομα
της ετικέτας, αλλά και μια τέτοια κατασκευή - '<div></div>'
- σε αυτήν την περίπτωση το αποτέλεσμα θα είναι ακριβώς το ίδιο:
$('.www').wrap('<div></div>');
Ο κώδικας HTML θα γίνει έτσι:
<div><p class="www">κείμενο</p></div>
<div><p class="www">κείμενο</p></div>
<div><p class="www">κείμενο</p></div>
<p>κείμενο</p>
Όταν χρησιμοποιείται ο δεύτερος τρόπος, στην
ετικέτα ανοίγματος (στην περίπτωσή μας '<div>')
μπορούμε να γράψουμε οποιαδήποτε χαρακτηριστικά, ενώ
το τύλιγμα θα γίνεται μαζί με αυτά τα χαρακτηριστικά.
Ας τυλίξουμε τις παραγράφους μας με ένα div με κλάση
zzz:
$('.www').wrap('<div class="zzz"></div>');
Ο κώδικας HTML θα γίνει έτσι:
<div class="zzz"><p class="www">κείμενο</p></div>
<div class="zzz"><p class="www">κείμενο</p></div>
<div class="zzz"><p class="www">κείμενο</p></div>
<p>κείμενο</p>
Τυλίξτε κάθε h3 σε div
με κλάση aaa.
