Oletame, et teil on string, mis on string:
let string_of_html = ` Cool `;Võib-olla pärineb see API-st või olete selle ise malli literaalidest vms üles ehitanud.
Selle abil saate innerHTMLselle elementi lisada, näiteks:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;insertAdjacentHTMLFunktsiooniga liitumisel on teil veidi parem kontroll, kuna saate uue HTML-i paigutada nelja erinevasse kohta:
text inside node Kasutate seda nagu…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);On olukordi, kus võiksite vastloodud DOM-i siiski JavaScripti lisada, enne kui sellega midagi ette võtate. Sel juhul võite kõigepealt oma stringi sõeluda, näiteks:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');See annab teile täieliku DOM-i, nii et peate seejärel oma lisatud lapse välja tõmbama. Eeldades, et sellel on ainult üks vanemelement, see on nagu…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Nüüd saate sellega vajadusel segi ajada new_element, ma arvan, enne kui teete sellega, mida peate sellega tegema.
Seda on siiski natuke lihtsam teha:
let new_element = document.createRange() .createContextualFragment(string_of_html);Elemendi saate otse lisada dokumendifragmendina või mida iganes vaja. See meetod on tähelepanuväärne selle poolest, et ta tegelikult teostab sisemuses leiduvaid andmeid, mis võivad olla nii kasulikud kui ka ohtlikud.
Selles kõiges on märkimisväärne nüanss. Näiteks HTML peab olema kehtiv. Vigane HTML lihtsalt ei hakka tööle. Vigastatud vorm võib tabada teid ka üllatusena, näiteks a-tähe sisestamine
Koen Schaft kirjutas „Loo HTML-stringist DOM-sõlme“, mis hõlmab siin leiduvat, kuid üksikasjalikumalt ja rohkemate getchadega.
ebaõnnestub, kuna sellel puudub a. #####