Η μέθοδος HTML DOM Document createDocumentFragment()

Ορισμός και χρήση

createDocumentFragment() Η μέθοδος δημιουργεί τα στοιχεία offscreen.

Τα στοιχεία offscreen μπορούν να χρησιμοποιηθούν για τη κατασκευή νέων κειμένων που μπορούν να εισαχθούν σε οποιοδήποτε κείμενο.

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

Συμβουλή

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

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

Σημείωση:Οι κόμβοι που προστίθενται στον κόμβο του κειμένου αφαιρούνται από το αρχικό κείμενο.

Παράδειγμα

Παράδειγμα 1

Προσθήκη στοιχείων στον κενό κατάλογο:

const fruits = ['Banana', 'Orange', 'Mango'];
// Δημιουργία κειμένου του κειμένου:
const dFrag = document.createDocumentFragment();
// Προσθήκη του στοιχείου li στο κείμενο του κειμένου:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Προσθήκη του κειμένου στο κατάλογο:
document.getElementById('myList').appendChild(dFrag);

Προσπάθησε να το δοκιμάσεις

Παράδειγμα 2

Προσθήκη στοιχείων στον υπάρχοντα κατάλογο:

const fruits = ['Banana', 'Orange', 'Mango'];
// Δημιουργία κειμένου του κειμένου:
const dFrag = document.createDocumentFragment();
// Προσθήκη του στοιχείου li στο κείμενο του κειμένου:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Προσθήκη του κειμένου στο κατάλογο:
document.getElementById('myList').appendChild(dFrag);

Προσπάθησε να το δοκιμάσεις

Γραμματική

document.createDocumentFragment()

Παράμετροι

Δεν υπάρχει.

Απόδοση

Τύπος Περιγραφή
Κόμβος Καθορισμένοι νέοι κόμβοι DocumentFragment χωρίς υποκόμβους.

Υποστήριξη από τον περιηγητή

document.createComment() Είναι χαρακτηριστικά DOM Level 1 (1998).

Όλοι οι περιηγητές υποστηρίζουν το:}

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη 9-11 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη