Injicēt HTML no HTML virknes - CSS-triki

Anonim

Pieņemsim, ka jums ir HTML, kas ir virkne:

let string_of_html = ` Cool `;

Varbūt tas nāk no API vai pats to esat izveidojis no veidņu literāļiem vai kaut kā cita.

Jūs varat izmantot, innerHTMLlai to ievietotu elementā, piemēram:

document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;

Jums ir nedaudz lielāka kontrole, ja izmantojat šo insertAdjacentHTMLfunkciju, jo jauno HTML varat ievietot četrās dažādās vietās:

 text inside node 

Jūs to izmantojat tāpat kā…

el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);

Ir gadījumi, kad jūs varētu vēlēties, lai jaunizveidotais DOM joprojām būtu JavaScript, pirms jūs kaut ko darāt ar to. Tādā gadījumā vispirms varētu parsēt virkni, piemēram:

let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');

Tas jums dos pilnīgu DOM, tāpēc jums vajadzēs izravēt pievienoto bērnu. Pieņemot, ka tam ir tikai viens vecāku elements, piemēram,…

let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;

Tagad jūs varat sajaukt ar to new_elementpēc vajadzības, es domāju, ka pirms darāt to, kas jums ar to jādara.

Lai to izdarītu, ir mazliet vienkāršāk:

let new_element = document.createRange() .createContextualFragment(string_of_html);

Jūs saņemsiet elementu tieši kā pievienojamu dokumenta fragmentu vai visu nepieciešamo. Šī metode ir ievērojama ar to, ka tā faktiski izpildīs tās iekšpusē atrastos datus, kas var būt gan noderīgi, gan bīstami.

Tam visam ir ievērojams daudzums nianšu. Piemēram, HTML ir jābūt derīgam. Nepareizi veidots HTML vienkārši nedarbosies. Nepareiza forma var arī jūs pārsteigt, piemēram, ielikt a

Kens Šafts raksta “Izveidojiet DOM mezglu no HTML virknes”, kas aptver to, kas mums šeit ir, bet sīkāk un ar vairākām gotchām.





neizdosies, jo tam trūkst a. #####