Recimo, da imate nekaj HTML-ja, ki je niz:
let string_of_html = ` Cool `;Morda prihaja iz API-ja ali ste ga sami izdelali iz literarnih predlogov ali kaj podobnega.
To lahko uporabite, innerHTMLda to vstavite v element, na primer:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Če uporabljate insertAdjacentHTMLfunkcijo, imate nekoliko več nadzora, saj lahko novi HTML postavite na štiri različna mesta:
text inside node Uporabljate ga kot ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);V nekaterih okoliščinah boste morda želeli, da bo na novo ustvarjeni DOM še vedno v JavaScript, preden boste kar koli storili z njim. V tem primeru lahko najprej razčlenite niz, na primer:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Tako boste dobili popoln DOM, zato boste morali izvleči otroka, ki ste ga dodali. Ob predpostavki, da ima samo en nadrejeni element, je to kot ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Zdaj se lahko po potrebi s tem zafrkavate new_element, preden se lotite tega, kar morate z njim.
To je nekoliko bolj preprosto:
let new_element = document.createRange() .createContextualFragment(string_of_html);Element boste dobili neposredno kot fragment dokumenta, ki ga želite dodati, ali kar koli po potrebi. Ta metoda je opazna s tem, da bo dejansko izvedla tiste, ki jih najde znotraj, kar je lahko koristno in nevarno.
Vse to ima precejšnje odtenke. HTML mora biti na primer veljaven. Napačno oblikovan HTML preprosto ne bo deloval. Popačen morda tudi vas ujeli presenetilo, kot tako, da pred Into
Koen Schaft je napisal »Ustvari vozlišče DOM iz niza HTML«, ki zajema tisto, kar imamo tukaj, vendar bolj podrobno in z več informacijami
ne bo uspelo, ker manjka a. #####