Oletetaan, että sinulla on HTML-koodi, joka on merkkijono:
let string_of_html = ` Cool `;Ehkä se tulee sovellusliittymästä tai olet rakentanut sen itse malli literaaleista tai jotain.
Voit innerHTMLlaittaa sen elementtiin, kuten:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Sinulla on hieman enemmän hallintaa, jos menet insertAdjacentHTMLtoiminnon kanssa, koska voit sijoittaa uuden HTML: n neljään eri paikkaan:
text inside node Käytät sitä kuten…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Joissakin tilanteissa saatat haluta, että äskettäin luotu DOM on edelleen JavaScriptissä, ennen kuin teet mitään sen kanssa. Siinä tapauksessa voit ensin jäsentää merkkijonosi, kuten:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Se antaa sinulle täydellisen DOM: n, joten sinun on sitten jenkki lisäämäsi lapsi. Olettaen, että sillä on vain yksi vanhempi elementti, se on kuin…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Nyt voit sotkea sen kanssa new_elementtarpeen mukaan, luulen ennen kuin teet sen, mitä sinun täytyy tehdä sen kanssa.
On kuitenkin hieman suorempaa tehdä tämä:
let new_element = document.createRange() .createContextualFragment(string_of_html);Saat elementin suoraan asiakirjan fragmenttina liitettäväksi tai mitä tahansa tarpeen mukaan. Tämä menetelmä on merkittävä siinä mielessä, että se todella toteuttaa sisältä löytämänsä, mikä voi olla sekä hyödyllistä että vaarallista.
Kaikessa tässä on huomattava määrä vivahteita. Esimerkiksi HTML: n on oltava kelvollinen. Väärin muotoiltu HTML ei vain toimi. Epämuodostunut saattaa myös saada sinut yllättäen, kuten a: n laittaminen
Koen Schaft kirjoittaa "Luo DOM-solmu HTML-merkkijonosta", joka kattaa mitä meillä on täällä, mutta yksityiskohtaisemmin ja enemmän gotchoja.
epäonnistuu, koska siitä puuttuu a. #####