Tegyük fel, hogy van HTML kódja, amely egy karakterlánc:
let string_of_html = ` Cool `;Lehet, hogy egy API-ból származik, vagy maga készítette el sablon literálokból vagy valami másból.
Használhatja innerHTMLezt egy elembe, például:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Kicsit jobban szabályozhatja, ha a insertAdjacentHTMLfunkcióval együtt jár, mivel az új HTML-t négy különböző helyre helyezheti el:
text inside node Úgy használja, mint…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Vannak olyan esetek, amikor érdemes lehet, hogy az újonnan létrehozott DOM még mindig JavaScriptben legyen, mielőtt bármit is tenne vele. Ebben az esetben először elemezheti a karakterláncát, például:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Ezzel teljes DOM-ot kapsz, így aztán ki kell rángatnod a hozzá adott gyermeket. Feltételezve, hogy csak egy szülőeleme van, ez…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Most szükség szerint összevissza kavarhat new_element, gondolom, mielőtt megtenné, amit meg kell tennie vele.
Kicsit egyszerűbb ezt megtenni:
let new_element = document.createRange() .createContextualFragment(string_of_html);Az elemet közvetlenül dokumentumrészletként kapja meg, amelyet hozzá lehet fűzni, vagy bármi máshoz, amire szükség van. Ez a módszer abban a tekintetben figyelemre méltó, hogy valójában végrehajtja a benne találtakat, amelyek egyszerre lehetnek hasznosak és veszélyesek is.
Jelentős mennyiségű árnyalat van ebben az egészben. Például a HTML-nek érvényesnek kell lennie. A rosszul formázott HTML egyszerűen nem fog működni. A rosszul formáltak meglepetéssel is megragadhatnak, például a
Koen Schaft írja: „Hozzon létre egy DOM-csomópontot egy HTML-karakterláncból”, amely lefedi az itt találhatóakat, de részletesebben és még több getchával.
nem fog sikerülni, mert hiányzik a. #####