Povedzme, že máte nejaký HTML, ktorý je reťazcom:
let string_of_html = ` Cool `;Možno to pochádza z API alebo ste si to vytvorili sami zo šablónových literálov alebo niečoho podobného.
Môžete innerHTMLto vložiť do prvku, napríklad:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Ak pôjdete s insertAdjacentHTMLfunkciou, budete mať o niečo väčšiu kontrolu, pretože nový kód HTML môžete umiestniť na štyri rôzne miesta:
text inside node Používate to ako ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Za určitých okolností by ste mohli chcieť mať novovytvorený DOM v JavaScripte stále, skôr ako s ním niečo urobíte. V takom prípade môžete najskôr analyzovať reťazec, napríklad:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Získate tak kompletný DOM, takže budete musieť vytrhnúť dieťa, ktoré ste pridali. Za predpokladu, že má iba jeden nadradený prvok, je to ako ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Teraz sa s tým môžete new_elementpodľa potreby popasovať, myslím, že skôr, ako urobíte to, čo s tým musíte urobiť.
Je to však o niečo priamočiarejšie:
let new_element = document.createRange() .createContextualFragment(string_of_html);Element dostanete priamo ako fragment dokumentu, ktorý chcete pridať alebo podľa potreby. Táto metóda je pozoruhodná v tom, že skutočne vykoná s, ktoré nájde vo vnútri, čo môže byť užitočné aj nebezpečné.
To všetko má značné množstvo odtieňov. Napríklad HTML musí byť platný. Poškodený kód HTML jednoducho nebude fungovať. Malformed vás tiež môže zaskočiť, ako napríklad vloženie a
Koen Schaft píše „Vytvorte uzol DOM z reťazca HTML“, ktorý pokrýva to, čo tu máme, ale podrobnejšie a s ďalšími podrobnosťami.
zlyhá, pretože chýba a. #####