Załóżmy, że masz kod HTML, który jest ciągiem:
let string_of_html = ` Cool `;Może pochodzi z API lub sam go zbudowałeś z literałów szablonu lub coś w tym rodzaju.
Możesz użyć, innerHTMLaby umieścić to w elemencie, na przykład:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Jeśli korzystasz z funkcji, masz nieco większą kontrolę, insertAdjacentHTMLponieważ możesz umieścić nowy kod HTML w czterech różnych miejscach:
text inside node Używasz tego jak…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Są okoliczności, w których możesz chcieć, aby nowo utworzony DOM nadal był w JavaScript, zanim cokolwiek z nim zrobisz. W takim przypadku możesz najpierw przeanalizować swój ciąg, na przykład:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');To da ci pełny DOM, więc będziesz musiał wyciągnąć dodane dziecko. Zakładając, że ma tylko jeden element nadrzędny, to jest jak…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Teraz możesz sobie z tym new_elementporadzić w razie potrzeby, przypuszczam, że zanim zrobisz to, co musisz z tym zrobić.
Jest to jednak nieco prostsze:
let new_element = document.createRange() .createContextualFragment(string_of_html);Otrzymasz element bezpośrednio jako fragment dokumentu do dołączenia lub cokolwiek w razie potrzeby. Ta metoda wyróżnia się tym, że faktycznie wykona to, co znajdzie w środku, co może być zarówno przydatne, jak i niebezpieczne.
W tym wszystkim jest sporo niuansów. Na przykład kod HTML musi być prawidłowy. Zniekształcony kod HTML po prostu nie będzie działać. Zdeformowany może Cię również zaskoczyć, na przykład umieszczając w
Koen Schaft pisze „Utwórz węzeł DOM na podstawie ciągu HTML”, który opisuje to, co tu mamy, ale bardziej szczegółowo i z większą ilością problemów.
nie powiedzie się, ponieważ brakuje pliku. #####