Spuneți că aveți un cod HTML care este un șir:
let string_of_html = ` Cool `;Poate că provine dintr-un API sau l-ați construit singur din literalele șablonului sau ceva de genul acesta.
Puteți utiliza innerHTMLpentru a pune acest lucru într-un element, cum ar fi:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Aveți ceva mai mult control dacă mergeți cu insertAdjacentHTMLfuncția, deoarece puteți plasa noul HTML în patru locuri diferite:
text inside node O folosești ca ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Există circumstanțe în care ați putea dori să aveți noul DOM nou creat în JavaScript înainte de a face ceva cu el. În acest caz, ați putea analiza mai întâi șirul, cum ar fi:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Acest lucru vă va oferi un DOM complet, așa că va trebui să scoateți copilul pe care l-ați adăugat. Presupunând că are doar un element părinte, este ca ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Acum poți să te new_elementdescurci cu asta după cum este necesar, cred că înainte de a face ceea ce trebuie să faci cu ea.
Este un pic mai simplu să faci acest lucru:
let new_element = document.createRange() .createContextualFragment(string_of_html);Veți obține elementul direct ca un fragment de document de adăugat sau orice altceva, după cum este necesar. Această metodă este remarcabilă prin faptul că va executa efectiv pe care le găsește în interior, ceea ce poate fi atât util cât și periculos.
Există o cantitate considerabilă de nuanțe în toate acestea. De exemplu, codul HTML trebuie să fie valid. HTML malformat pur și simplu nu va funcționa. Deformați s-ar putea să vă surprindă, de asemenea, prin surprindere, cum ar fi introducerea unui într-un
Koen Schaft scrie „Creați un nod DOM dintr-un șir HTML” care acoperă ceea ce avem aici, dar mai în detaliu și cu mai multe informații.
va eșua pentru că lipsește un. #####