Ας πούμε ότι έχετε κάποιο HTML που είναι μια συμβολοσειρά:
let string_of_html = ` Cool `;Ίσως προέρχεται από ένα API ή το έχετε δημιουργήσει μόνοι σας από πρότυπα κυκλώματος ή κάτι τέτοιο.
Μπορείτε να το χρησιμοποιήσετε innerHTMLγια να το τοποθετήσετε σε ένα στοιχείο, όπως:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Έχετε λίγο περισσότερο έλεγχο εάν ακολουθείτε τη insertAdjacentHTMLλειτουργία καθώς μπορείτε να τοποθετήσετε το νέο HTML σε τέσσερα διαφορετικά μέρη:
text inside node Το χρησιμοποιείτε σαν…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Υπάρχουν περιπτώσεις όπου μπορεί να θέλετε να διατηρήσετε το DOM που δημιουργήθηκε πρόσφατα σε JavaScript πριν κάνετε κάτι με αυτό. Σε αυτήν την περίπτωση, θα μπορούσατε πρώτα να αναλύσετε τη συμβολοσειρά σας, όπως:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Αυτό θα σας δώσει ένα πλήρες DOM, οπότε θα πρέπει στη συνέχεια να τραβήξετε το παιδί που προσθέσατε. Υποθέτοντας ότι έχει μόνο ένα γονικό στοιχείο, δηλαδή…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Τώρα μπορείτε να το ανακαλύψετε new_elementόπως απαιτείται, υποθέτω πριν κάνετε αυτό που πρέπει να κάνετε με αυτό.
Ωστόσο, είναι λίγο πιο εύκολο να το κάνετε αυτό:
let new_element = document.createRange() .createContextualFragment(string_of_html);Θα λάβετε το στοιχείο απευθείας ως τμήμα εγγράφου για προσάρτηση ή οτιδήποτε άλλο χρειαστεί. Αυτή η μέθοδος είναι αξιοσημείωτη στο ότι θα εκτελέσει όντως βρίσκει μέσα, κάτι που μπορεί να είναι χρήσιμο και επικίνδυνο.
Υπάρχει μια μεγάλη απόχρωση σε όλα αυτά. Για παράδειγμα, το HTML πρέπει να είναι έγκυρο. Το HTML με λανθασμένη μορφή δεν πρόκειται να λειτουργήσει. Η λανθασμένη μορφή μπορεί επίσης να σας προκαλέσει έκπληξη, όπως το βάζοντας σε ένα
Ο Koen Schaft γράφει «Δημιουργήστε έναν κόμβο DOM από μια συμβολοσειρά HTML» που καλύπτει αυτό που έχουμε εδώ, αλλά με περισσότερες λεπτομέρειες και με περισσότερα από τα gotchas.
θα αποτύχει επειδή λείπει ένα. #####