Supponi di avere un codice HTML che è una stringa:
let string_of_html = ` Cool `;Forse proviene da un'API o l'hai costruito tu stesso da letterali modello o qualcosa del genere.
Puoi usarlo innerHTMLper inserirlo in un elemento, come:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Hai un po 'più di controllo se vai con la insertAdjacentHTMLfunzione in quanto puoi posizionare il nuovo HTML in quattro posti diversi:
text inside node Lo usi come ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Ci sono circostanze in cui potresti voler avere il DOM appena creato ancora in JavaScript prima di fare qualsiasi cosa con esso. In tal caso, potresti prima analizzare la tua stringa, come:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Questo ti darà un DOM completo, quindi dovrai estrarre il bambino che hai aggiunto. Supponendo che abbia un solo elemento genitore, è come ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Ora puoi scherzare con quello new_elementsecondo necessità, suppongo prima di fare quello che devi fare con esso.
Tuttavia, è un po 'più semplice farlo:
let new_element = document.createRange() .createContextualFragment(string_of_html);Otterrai l'elemento direttamente come frammento di documento da aggiungere o qualsiasi altra cosa, se necessario. Questo metodo è notevole in quanto eseguirà effettivamente quelli che trova all'interno, il che può essere sia utile che pericoloso.
C'è una notevole quantità di sfumature in tutto questo. Ad esempio, l'HTML deve essere valido. HTML malformato semplicemente non funzionerà. Malformed potrebbe anche coglierti di sorpresa, come mettere un file in un file
Koen Schaft scrive "Crea un nodo DOM da una stringa HTML" che copre ciò che abbiamo qui ma in modo più dettagliato e con più trucchi.
fallirà perché manca un file. #####