Γειά σου! Χρησιμοποιώντας JavaScript, μπορείτε όχι μόνο να βρείτε στοιχεία σε μια σελίδα (διαβάστε πώς να το κάνετε αυτό), αλλά και να δημιουργήσετε στοιχεία δυναμικά και να τα προσθέσετε στο DOM. Πώς να το κάνετε αυτό θα συζητηθεί σε αυτό το μάθημα.

Προκειμένου να δημιουργηθεί νέο στοιχείοσε μια ιστοσελίδα - το αντικείμενο εγγράφου έχει τις ακόλουθες μεθόδους:

• createElement(elementName): δημιουργεί ένα νέο στοιχείο, οποιαδήποτε ετικέτα σελίδας HTML πρέπει να μεταβιβαστεί ως παράμετρος, επιστρέφει ένα στοιχείο HTML
• createTextNode(text) : Δημιουργεί έναν κόμβο κειμένου και επιστρέφει τον ίδιο.

Προσθήκη στοιχείου

Ας δούμε ένα μικρό παράδειγμα:

Var el = document.createElement("div"); var elText = document.createTextNode("Hello world");

Όπως μπορείτε να δείτε από το παράδειγμα, η μεταβλητή elem θα αποθηκεύσει έναν σύνδεσμο προς το νέο στοιχείο div. Ωστόσο, όπως καταλαβαίνετε, η δημιουργία στοιχείων δεν είναι αρκετή· πρέπει ακόμα να προστεθούν στην ιστοσελίδα. Εξάλλου, όταν δημιουργούμε στοιχεία με αυτόν τον τρόπο, φαίνεται να βρίσκονται σε κάποιο είδος εικονικού χώρου ή στη μνήμη, αλλά για να τα εμφανίσουμε σε μια ιστοσελίδα υπάρχουν ειδικές μέθοδοι.

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

• appendChild(newNode): προσθέτει ένα νέο στοιχείο στο τέλος του στοιχείου στο οποίο κλήθηκε αυτή η μέθοδος
• insertBefore(newNode, referenceNode): προσθέτει έναν νέο κόμβο πριν από τον κόμβο που έχει καθοριστεί ως δεύτερη παράμετρος.

Ας δούμε ένα παράδειγμα επισύναψης στοιχείου σε μια ιστοσελίδα χρησιμοποιώντας τη μέθοδο appendChild:

Τίτλος άρθρου

Πρώτη παράγραφος

Δεύτερη παράγραφος

var article = document.querySelector("div.article"); // δημιουργία στοιχείου var el = document.createElement("h3"); // δημιουργία κειμένου για αυτό var elTxt = document.createTextNode("Hello world"); // προσθήκη κειμένου στο στοιχείο ως θυγατρικό στοιχείο el.appendChild(elTxt); // προσθέστε ένα στοιχείο στο άρθρο του μπλοκ div.appendChild(el);

Το παράδειγμα δημιούργησε ένα κανονικό στοιχείο κεφαλίδας h3 και έναν κόμβο κειμένου. Στη συνέχεια, ο κόμβος κειμένου προστίθεται στο στοιχείο τίτλου. Στη συνέχεια, ο τίτλος προστίθεται σε ένα από τα στοιχεία της ιστοσελίδας, ώστε να είναι ορατός στη σελίδα.

Αλλά δεν είναι καθόλου απαραίτητο να έχετε έναν πρόσθετο κόμβο κειμένου για τη δημιουργία κειμένου μέσα σε ένα στοιχείο· για αυτό, υπάρχει η ιδιότητα textContent, η οποία σας επιτρέπει να αντιστοιχίσετε απευθείας κείμενο σε ένα στοιχείο.

Var el = document.createElement("h3"); el.textContent = "Γεια, είμαι ο τίτλος";

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

Και ας δούμε επίσης πώς να προσθέσετε αυτό το στοιχείο στην αρχή μιας συλλογής θυγατρικών κόμβων ενός div:

Var artDiv = document.querySelector("div.article"); // δημιουργία στοιχείου var el = document.createElement("h2"); // δημιουργία κειμένου για αυτό var eltxt = document.createTextNode("Hello world"); // προσθήκη κειμένου στο στοιχείο ως θυγατρικό στοιχείο el.appendChild(eltxt); // πάρτε το πρώτο στοιχείο που θα προηγηθεί η προσθήκη var firstEl = artDiv.firstChild.nextSibling; // προσθέστε ένα στοιχείο στο μπλοκ div πριν από τον πρώτο κόμβο artDiv.insertBefore(el, firstEl);

Εάν ξαφνικά χρειαστεί να προσθέσετε έναν νέο κόμβο στο δεύτερο, τρίτο ή οποιοδήποτε άλλο μέρος, τότε πρέπει να βρείτε τον κόμβο πριν από τον οποίο πρέπει να τον εισαγάγετε χρησιμοποιώντας τις ακόλουθες ιδιότητες firstChild/lastChild ή nextSibling/previousSibling.

Αντιγραφή στοιχείου

Υπάρχουν περιπτώσεις όπου τα στοιχεία είναι αρκετά περίπλοκα στη σύνθεση και είναι ευκολότερο να τα αντιγράψετε. Για αυτό χρησιμοποιείται μια ξεχωριστή μέθοδος cloneNode().

Var artDiv = document.querySelector("div.article"); // κλωνοποίηση του στοιχείου articleDiv var newArtDiv = artDiv.cloneNode(true); // προσθήκη στο τέλος του στοιχείου σώματος document.body.appendChild(newArtDiv);

Πρέπει να περάσετε μια Boolean τιμή ως παράμετρο στη μέθοδο cloneNode(): εάν μεταβιβάσετε true, το στοιχείο θα αντιγραφεί μαζί με όλους τους θυγατρικούς κόμβους. αν περάσετε false, θα αντιγραφεί χωρίς θυγατρικούς κόμβους. ΣΕ σε αυτό το παράδειγμααντιγράφουμε το στοιχείο μαζί με το περιεχόμενό του και το προσθέτουμε στο τέλος της ιστοσελίδας.

Αφαίρεση στοιχείου

Για να αφαιρέσετε ένα στοιχείο, πρέπει να καλέσετε τη μέθοδο removeChild(). Αυτή η μέθοδος θα αφαιρέσει έναν από τους θυγατρικούς κόμβους:

Var artDiv = document.querySelector("div.article"); // βρείτε τον κόμβο που θα διαγράψουμε - την πρώτη παράγραφο var removNode = document.querySelectorAll("div.article p"); // αφαιρέστε τον κόμβο artDiv.removeChild(removNode);

Αυτό το παράδειγμα θα αφαιρέσει την πρώτη παράγραφο από το μπλοκ div

Αντικατάσταση στοιχείου

Για να αντικαταστήσετε ένα στοιχείο με ένα άλλο, χρησιμοποιήστε τη μέθοδο replaceChild(newNode, oldNode). Αυτή η μέθοδος λαμβάνει ένα νέο στοιχείο ως 1η παράμετρο, το οποίο αντικαθιστά το παλιό στοιχείο που έχει περάσει ως 2η παράμετρος.

Var artDiv = document.querySelector("div.article"); // βρείτε τον κόμβο που θα αντικαταστήσουμε - η πρώτη παράγραφος var old = document.querySelectorAll("div.article p"); // δημιουργία στοιχείου var new = document.createElement("h3"); // δημιουργία κειμένου για αυτό var elemtxt = document.createTextNode("Hello world"); // προσθήκη κειμένου στο στοιχείο ως θυγατρικό στοιχείο new.appendChild(elemtxt); // αντικαταστήστε τον παλιό κόμβο με έναν νέο artDiv.replaceChild(new, old);

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

ΑΠΟΤΕΛΕΣΜΑΤΑ.

Για τη δημιουργία ενός στοιχείου, χρησιμοποιούνται οι ακόλουθες μέθοδοι:

document.createElement(tag) - δημιουργεί ένα νέο στοιχείο.

document.createTextNode(text) - δημιουργεί έναν κόμβο κειμένου

Μέθοδοι εισαγωγής και αφαίρεσης κόμβων

• parent.appendChild(el) - προσαρτά ένα στοιχείο στο τέλος ενός υπάρχοντος στοιχείου
• parent.insertBefore(el, nextSibling) - εισάγει ένα στοιχείο πριν από ένα υπάρχον στοιχείο
• parent.removeChild(el) - αφαιρεί ένα στοιχείο
• parent.replaceChild(newElem, el) - αντικαθιστά ένα στοιχείο με ένα άλλο
• parent.cloneNode(bool) - αντιγράφει ένα στοιχείο, εάν η παράμετρος bool=true τότε το στοιχείο αντιγράφεται με όλα τα θυγατρικά στοιχεία και αν είναι false τότε χωρίς θυγατρικά στοιχεία

Εργασίες Λειτουργία εισαγωγής στοιχείων

Γράψτε μια συνάρτηση insertAfter(newEl,oldEl) που εισάγει το ένα στοιχείο μετά το άλλο στην ίδια τη συνάρτηση, τα ίδια τα στοιχεία περνούν ως παράμετροι.

Εάν έχετε γράψει ποτέ JavaScript και έπρεπε να γράψετε κάτι σαν:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Πραγματικό ψάρι."));
var div = document.createElement("div");
div.setAttribute("id", "new");
div.appendChild(p);

τότε αυτό μπορεί να είναι χρήσιμο για εσάς.

Πρόβλημα: Όταν δημιουργείτε περισσότερα από ένα στοιχεία ένθετα το ένα μέσα στο άλλο, ο κώδικας γίνεται πολύ περίπλοκος.

Προσφέρω ένα απλό εργαλείο για την επίλυση του προβλήματος - τη συνάρτηση create() (πηγαίος κώδικας παρακάτω). Για παράδειγμα, ας δημιουργήσουμε μια παράγραφο κειμένου:
var el = δημιουργία("p", ( ), "Αντίο, Αγάπη!");

Ή ένα div με μια παράγραφο και έναν σύνδεσμο μέσα σε αυτό:
var div = δημιουργία("div", ( id: "new", style: "background:#fff" ),
create("p", ( align: "center" ),
"εισαγωγή: ",
create("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg" ),
"εικόνα"),
": τέλος")
);

Ή εδώ κάνουμε έναν πίνακα:
var holder = document.getElementById("holder2");
var πίνακα?
var td;
holder.appendChild(
τραπέζι =
create("table", (id: "ugly", cols:3),
δημιουργία ("tbody", (),
create("tr", (),
create("td", (πλάτος: "10%" ),
"Γειά σου"),
td =
create("td", ( style: "background: #fcc" ),
"εκεί")
create("td", (Κλάση: "special2"), "Everywhere")
)
);

Σημείωση: 1. Το IE απαιτεί ένα στοιχείο tbody, διαφορετικά αρνείται να εμφανίσει τον πίνακα.
2. Το χαρακτηριστικό class έρχεται σε διένεξη με κάτι, επομένως πρέπει να το γράψετε ως Class. Αυτό δεν φαίνεται να έχει καμία επίδραση στο αποτέλεσμα.
3. table = και tr = στο παράδειγμα σας επιτρέπουν να αποθηκεύσετε τα ένθετα αντικείμενα που δημιουργήσατε για περαιτέρω εργασία μαζί τους.
4. Αυτός ο κώδικας λειτουργεί σε IE, Mozilla και Opera. Η ίδια η συνάρτηση δημιουργία (όνομα, χαρακτηριστικά) (
var el = document.createElement(name);
αν (τύπος χαρακτηριστικών == "αντικείμενο") (
για (var i σε χαρακτηριστικά) (
el.setAttribute(i, χαρακτηριστικά[i]);

Αν (i.toLowerCase() == "class") (
el.className = χαρακτηριστικά[i]; // για συμβατότητα IE

) αλλιώς εάν (i.toLowerCase() == "στυλ") (
el.style.cssText = ιδιότητες[i]; // για συμβατότητα IE
}
}
}
για (var i = 2;i< arguments.length; i++) {
var val = ορίσματα[i];
if (typeof val == "string") ( val = document.createTextNode(val) );
el.appendChild(val);
}
επιστροφή el;
}

Θα πρέπει να ευχαριστήσουμε τον Ivan Kurmanov για την ιδέα,
Πρωτότυπο άρθρο με παραδείγματα εργασίας:

αφαίρεση στοιχείου js (12)

Βήμα 1. Προετοιμάστε τα στοιχεία:

var element = document.getElementById("ElementToAppendAfter"); var newElement = document.createElement("div"); var elementParent = element.parentNode;

Βήμα 2. Προσθέστε μετά:

elementParent.insertBefore(newElement, element.nextSibling);

Η JavaScript έχει την insertBefore() αλλά πώς μπορώ να εισάγω ένα στοιχείο μετάάλλο στοιχείο χωρίς χρήση jQuery ή άλλης βιβλιοθήκης;

Η απλή JavaScript θα ήταν:

Προσθήκη:

Element.parentNode.insertBefore(newElement, element);

Προσθήκη μετά:

Element.parentNode.insertBefore(newElement, element.nextSibling);

Αλλά, ρίξτε μερικά πρωτότυπα εκεί για ευκολία στη χρήση

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

newElement.appendBefore(στοιχείο);

newElement.appendAfter(element);

.appendBefore(element) Πρωτότυπο

Element.prototype.appendBefore = συνάρτηση (στοιχείο) ( element.parentNode.insertBefore(this, element); ),false;

.appendAfter(element)Prototype

Element.prototype.appendAfter = συνάρτηση (στοιχείο) ( element.parentNode.insertBefore(this, element.nextSibling); ),false;

Και για να το δείτε σε δράση, εκτελέστε το παρακάτω απόσπασμα κώδικα

/* Προσθέτει στοιχείο BEFORE NeighborElement */ Element.prototype.appendBefore = συνάρτηση(στοιχείο) ( element.parentNode.insertBefore(this, element); ), false; /* Προσθέτει στοιχείο AFTER NeighborElement */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Τυπική δημιουργία και ρύθμιση ενός νέου ορφανού αντικειμένου στοιχείου */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Νέο στοιχείο"; NewElement.id = "NewElement"; /* Προσθήκη NewElement ΠΡΙΝ -OR- ΜΕΤΑ Χρήση των προαναφερθέντων πρωτοτύπων */ NewElement.appendAfter(document.getElementById("Neighbor2")); div ( στοίχιση κειμένου: κέντρο; ) #Neighborhood ( χρώμα: καφέ; ) #NewElement ( χρώμα: πράσινο; ) Neighbor 1 Neighbor 2 Neighbor 3

Ιδανικά το insertAfter θα πρέπει να λειτουργεί παρόμοια με το MDN. Ο παρακάτω κώδικας θα κάνει τα εξής:

• Εάν δεν υπάρχουν παιδιά, προστίθεται ένας νέος κόμβος
• Εάν δεν υπάρχει Κόμβος αναφοράς, προστίθεται ένας νέος Κόμβος
• Εάν υπάρχει ένας Κόμβος μετά τον Κόμβο αναφοράς, προστίθεται ένας νέος Κόμβος
• Εάν ο αναφερόμενος Κόμβος έχει τότε παιδιά, τότε ο νέος Κόμβος εισάγεται πριν από αυτόν τον αδελφό
• Επιστρέφει έναν νέο Κόμβο

Επέκταση κόμβου

Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; );

Ένα γενικό παράδειγμα

Node.parentNode.insertAfter(newNode, node);

Δείτε την εκτέλεση κώδικα

// Πρώτα επέκταση Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; ); var referenceNode, newNode; newNode = document.createElement("li") newNode.innerText = "Πρώτο νέο στοιχείο"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Δεύτερο νέο στοιχείο"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("no-sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Τρίτο νέο στοιχείο"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Τέταρτο νέο στοιχείο"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); Χωρίς παιδιά Χωρίς κόμβο αναφοράς

• Πρώτο στοιχείο

Χωρίς αδέρφια μετά

• Πρώτο στοιχείο

Αδερφάκι μετά

• Πρώτο στοιχείο
• Τρίτο στοιχείο

Η μέθοδος insertBefore() χρησιμοποιείται όπως το parentNode.insertBefore() . Έτσι για να το προσομοιώσουμε και να φτιάξουμε μια μέθοδο parentNode.insertAfter() μπορούμε να γράψουμε τον παρακάτω κώδικα.

Node.prototype.insertAfter = function(newNode, referenceNode) ( επιστροφή referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // βάσει της λύσης του karim79); // λήψη των απαιτούμενων χειρισμών var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // δημιουργία

παράγραφος τρία

var txt = document.createTextNode("παράγραφος τρία"); var paragraph = document.createElement("p"); paragraph.appendChild(txt); // τώρα μπορούμε να το ονομάσουμε με τον ίδιο τρόπο όπως το insertBefore() parent.insertAfter(paragraph, refElem);

πρώτη παράγραφος

παράγραφος δύο

Λάβετε υπόψη ότι η επέκταση DOM ενδέχεται να μην είναι η σωστή λύση για εσάς, όπως αναφέρεται σε αυτό το άρθρο.

Ωστόσο, αυτό το άρθρο γράφτηκε το 2010 και τα πράγματα μπορεί να είναι διαφορετικά τώρα. Αποφασίστε λοιπόν μόνοι σας.

Σας επιτρέπει να χειρίζεστε όλα τα σενάρια

Συνάρτηση insertAfter(newNode, referenceNode) ( if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == "#text") referenceNode = referenceNode.nextSibling; if(!referenceNode) document.body.appendChild(newNode); (!referenceNode.nextSibling) document.body.appendChild(newNode); αλλιώς referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); )

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

Var raf, cb=function())( //create newnode var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //εισάγετε μετά τον τελευταίο κόμβο var nodes=document.getElementsByTagName("link"); //υπάρχοντες κόμβοι var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(σύνδεσμος, τελευταίος κόμβος. επόμενο αδελφάκι ); ); //ελέγξτε πριν την εισαγωγή δοκιμάστε ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)(raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

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

Χρειάζομαι μια συνάρτηση που έχει ακριβώς την αντίθετη συμπεριφορά από το parentNode.insertBefore - δηλαδή, θα πρέπει να δέχεται ένα null referenceNode (το οποίο δεν γίνεται αποδεκτό ως απόκριση) και όπου το insertBefore θα εισάγει στο τέλοςένθετοΠριν από το οποίο θα πρέπει να εισάγει αρχή, αφού διαφορετικά δεν θα υπήρχε καθόλου τρόπος επικόλλησης στην αρχική θέση με αυτήν τη λειτουργία. για τον ίδιο λόγο insertBefore inserts στο τέλος.

Δεδομένου ότι ένα null referenceNode απαιτεί από εσάς να εισάγετε πριν από το γονικό, πρέπει να γνωρίζουμε το γονικό - το insertBefore είναι μια μέθοδος του parentNode , επομένως έχει πρόσβαση στον γονικό κόμβο του γονέα με αυτόν τον τρόπο. Η συνάρτησή μας δεν υπάρχει, επομένως πρέπει να περάσουμε το γονικό στοιχείο ως παράμετρο.

Η συνάρτηση που προκύπτει μοιάζει με αυτό:

Συνάρτηση insertAfter(parentNode, newNode, referenceNode) ( parentNode.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: parentNode.firstChild); )

Αν (! Node.prototype.insertAfter) ( Node.prototype.insertAfter = function(newNode, referenceNode) ( this.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: this.firstChild); );

Ο node1.after(node2) δημιουργεί,

όπου ο κόμβος 1 και ο κόμβος 2 είναι κόμβοι DOM.

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

Ας δημιουργήσουμε ένα αντικείμενο για παράδειγμα var obj = ( name: "alex", last_name: "petrov", website: "site", );

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

Προσθήκη νέου στοιχείου obj.country = "ru"; // θα προσθέσει νέο κλειδί"country" σε ένα αντικείμενο με την τιμή "ru" obj["city"] = "Moscow"; // θα προσθέσει επίσης ένα νέο κλειδί, μόνο "city" με την τιμή "Moscow"

Ο παραπάνω κώδικας είναι σαφής, αλλά απλώς για διευκρίνιση: μπορείτε να προσθέσετε νέες τιμές σε ένα αντικείμενο στη σύνταξη αντικειμένου χρησιμοποιώντας το "." και το κλειδί ή τη συνήθη μορφή πίνακα. Εάν το δηλώσετε ως πίνακα, τότε το obj εξακολουθεί να είναι ένα αντικείμενο, αφού προηγουμένως το προσδιορίσατε με αυτόν τον τρόπο χάρη στο () .

Δημιουργήστε ένα αντικείμενο μέσα σε ένα αντικείμενο obj.other_obj = (); // δημιουργήστε μια νέα τιμή other_obj στο obj και κάντε την αντικείμενο

Τώρα ας προσθέσουμε κάποια δεδομένα εκεί:

Obj.other_obj.first = "πρώτο κλειδί του νέου αντικειμένου"; obj.other_obj.second = "δεύτερο";

Δημιουργήσαμε δύο νέες τιμές, πρώτη και δεύτερη, μέσα στο other_obj.

Διαγραφή στοιχείου delete obj.name; // επιστρέφει: true

Μπορείτε να χρησιμοποιήσετε το delete , το οποίο μπορεί να αφαιρέσει στοιχεία από αντικείμενα. Δεν μπορείτε να διαγράψετε ολόκληρο το αντικείμενο με αυτόν τον τρόπο, αλλά εάν χρειάζεται, μπορείτε να κάνετε το εξής:

Αντικείμενο = (); // Κάνει ξανά το αντικείμενο κενό

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

Αυτό είναι το τέταρτο μέρος των αναρτήσεων που είναι αφιερωμένα σε εγγενή ισοδύναμα των μεθόδων jQuery. Μπορεί να θέλετε να το διαβάσετε πριν συνεχίσετε.

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

Χειρισμός κώδικα HTML στοιχείων jQuery // get var html = $(elem).html(); // set $(elem).html("New html"); Native JS // get var html = elem.innerHTML; // set elem.innerHTML = "Νέο html"; Χειρισμός κειμένου στοιχείου jQuery // get var text = $(elem).text(); // set $(elem).text("Νέο κείμενο"); Native JS // get var text = elem.textContent; // set elem.textContent = "Νέο κείμενο"; Δημιουργία ενός στοιχείου jQuery $(""); Native JS document.createElement("div"); Προσθέτει περιεχόμενο στο τέλος των στοιχείων jQuery $(parentNode).append(newNode); Native JS parentNode.appendChild(newNode); Προσθέτει περιεχόμενο στην αρχή των στοιχείων jQuery $(referenceNode).prepend(newNode); Native JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // ή referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Εισαγωγή απευθείας πριν από ένα στοιχείο jQuery $(referenceNode).before(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // ή referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Εισαγωγή απευθείας μετά από ένα στοιχείο jQuery $(referenceNode).after(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // ή referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Σημείωση: Το «πριν από την αρχή» και το «μετά» θα λειτουργήσουν μόνο εάν ο referenceNode βρίσκεται στο δέντρο DOM και έχει ένα γονικό στοιχείο.

Δείτε τα παρακάτω:

ReferenceNode.insertAdjacentElement(θέση, κόμβος);

Η μέθοδος insertAdjacentElement παίρνει δύο παραμέτρους:

• θέση - θέση σε σχέση με το referenceNode, πρέπει να είναι ένα από τα ακόλουθα:
  • 'beforegin' - Πριν από το ίδιο το στοιχείο.
  • «afterbegin» — Μέσα στο στοιχείο, πριν από το πρώτο παιδί.
  • 'πριν' - Μέσα στο στοιχείο, μετά το τελευταίο παιδί.
  • ‘afterend’ - Μετά το ίδιο το στοιχείο.
• κόμβος — κόμβος για εισαγωγή

Περιεχόμενο κειμένου

Κάποιο κείμενο Κάποιο κείμενο var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("beforeend", elem2); // αποτέλεσμα Some TextSome Text

Η μέθοδος insertAdjacentElement είναι πιο καθαρή και πιο διαισθητική από τη μέθοδο insertBefore, αλλά η τελευταία υποστηρίζεται καλύτερα σε παλαιότερα προγράμματα περιήγησης.

Προσθήκη στοιχείων πολλές φορές

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

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

Ας υποθέσουμε ότι πρέπει να προσθέσουμε 100 στοιχεία li σε ένα στοιχείο ul που υπάρχει στο δέντρο DOM:

// Λάβετε το στοιχείο που θα περιέχει τα στοιχεία μας var ul = document.querySelector("ul"); // Δημιουργήστε 100 στοιχεία λίστας για (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

Στο παραπάνω παράδειγμα, τα στοιχεία li προστίθενται απευθείας στο στοιχείο ul, το οποίο βρίσκεται στο δέντρο DOM, επομένως θα έχει ως αποτέλεσμα μια νέα σχεδίαση σε κάθε επανάληψη - αυτό είναι 100 αλλαγές!

Ας βρούμε έναν καλύτερο τρόπο.

// Λάβετε το στοιχείο που θα περιέχει τα στοιχεία μας var ul = document.querySelector("ul"); // δημιουργήστε ένα τμήμα εγγράφου για να προσθέσετε τα στοιχεία της λίστας στο var docFrag = document.createDocumentFragment(); // Δημιουργήστε 100 στοιχεία λίστας για (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

Στο ίδιο παράδειγμα, τα στοιχεία li προστίθενται στο θραύσμα εγγράφου στη μνήμη, έτσι ώστε η επαναροή να ενεργοποιείται όταν το θραύσμα προστίθεται στο στοιχείο ul. Αυτή η μέθοδος θα μειώσει τον αριθμό των επαναλήψεων από 100 σε 1.

Αφαίρεση στοιχείου jQuery $(referenceNode).remove(); Native JS referenceNode.parentNode.removeChild(referenceNode); // ή referenceNode.remove(); // FF 23.0+, 23.0+, Edge (Χωρίς υποστήριξη IE)