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, innerHTML
lai 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 insertAdjacentHTML
funkciju, 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_element
pē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. #####