Tarkime, kad turite HTML, kuris yra eilutė:
let string_of_html = ` Cool `;Galbūt tai gaunama iš API, arba jūs patys sukonstravote ją iš šablonų literatų ar pan.
Galite naudoti innerHTMLtai įdėdami į elementą, pvz .:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Jūs galite šiek tiek geriau valdyti, jei einate su insertAdjacentHTMLfunkcija, nes galite įdėti naują HTML į keturias skirtingas vietas:
text inside node Jūs jį naudojate kaip…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Yra aplinkybių, kai galbūt norėsite, kad naujai sukurtas DOM vis dar būtų „JavaScript“, prieš pradėdami ką nors daryti. Tokiu atveju pirmiausia galite išanalizuoti savo eilutę, pavyzdžiui:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Tai suteiks jums pilną DOM, todėl turėsite išsitraukti pridėtą vaiką. Darant prielaidą, kad jis turi tik vieną pagrindinį elementą, tai yra…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Dabar, new_elementjei reikia, prieš tai darydami tai, ko jums reikia, galite susipainioti.
Vis dėlto šiek tiek paprasčiau tai padaryti:
let new_element = document.createRange() .createContextualFragment(string_of_html);Elementą gausite kaip dokumento fragmentą, kurį reikia pridėti, ar bet ką, jei reikia. Šis metodas yra žinomas tuo, kad jis iš tikrųjų įvykdys savo viduje esančius veiksmus, kurie gali būti naudingi ir pavojingi.
Visa tai turi nemažai niuansų. Pavyzdžiui, HTML turi būti galiojantis. Netinkamai suformuotas HTML tiesiog neveiks. Netinkamai suformuota forma taip pat gali jus nustebinti, pavyzdžiui, įdėti į
Koenas Schaftas parašė „Sukurkite DOM mazgą iš HTML eilutės“, kuris aprėpia tai, ką mes čia turime, bet išsamiau ir daugiau „getchų“.
nepavyks, nes trūksta a. #####