HTML 문자열에서 DOM 요소를 생성하는 방법(다양한 방법)

간단한 동적 HTML DOM 요소를 생성해야 하는 경우 HTML 문자열 템플릿을 사용할 수 있습니다. JavaScript에서 이를 달성하는 방법에는 여러 가지가 있지만 몇 가지 고려 사항이 있을 수 있습니다.

---

내부 HTML

const container = document.createElement('div');
container.innerHTML = `<div>Hello World</div>`;
const node = container.firstElementChild;

가장 일반적인 방법 중 하나입니다. 컨테이너 요소의 innerHTML에 HTML 문자열을 삽입한 다음 생성된 DOM 노드에 액세스합니다.

그러나 유효한 HTML 노드, 즉 표준 HTML 구조에서 유효한 요소만 처리할 수 있습니다. 예를 들어 요소를

에 추가하면 노드가 생성되지 않습니다.

게다가 이 방법은 HTML 문자열의 어떤 스크립트도 실행하지 않으므로 신뢰할 수 없는 콘텐츠를 처리할 때 더 안전합니다.

innerHTML + 템플릿 요소

const template = document.createElement('template');
template.innerHTML = `<div>Hello World</div>`;
const node = template.content.firstElementChild;

<템플릿> 사용의 장점 태그는 내용 제한이 없으며 그리고 .

insert인접 HTML

const container = document.createElement("div");
container.insertAdjacentHTML("afterbegin", `<div>Hello World</div>`);
const node = container.firstElementChild;

이 방법은 innerHTML과 유사하며 유효한 HTML 노드만 처리할 수 있습니다. 또한 스크립트를 실행하지 않습니다.

DOMParser

const node = new DOMParser().parseFromString(`<div>Hello World</div>`, "text/html").body.firstElementChild;

이 방법은 전체 HTML 문서를 생성하여 문자열을 구문 분석한 다음 문서에서 노드를 추출합니다. 즉, 다른 솔루션보다 상대적으로 느리므로 사용을 권장하지 않습니다.

유효한 HTML 노드만 처리할 수 있으며 스크립트는 실행되지 않습니다.

Range.createContextualFragment

const node = document.createRange().createContextualFragment(`<div>Hello World</div>`).firstElementChild;

이 방법이 아마도 가장 간단할 것입니다. 또한 기본적으로 유효한 HTML 노드만 처리할 수 있습니다. 그러나 이를 방지하기 위해 컨텍스트를 설정할 수 있습니다.

HTML 문자열의 스크립트를 실행하므로 DOMPurify와 같은 클리너를 사용하는 등 신뢰할 수 없는 콘텐츠를 처리할 때는 특히 주의하세요.

결론

경우에 따라 가장 적합한 방법을 선택해야 할 수도 있습니다.

제 콘텐츠가 도움이 되셨다면 구독을 고려해 보세요. 최신 웹 개발 업데이트가 포함된 뉴스레터를 매일 보냅니다. 여러분의 지원에 감사드립니다!

위 내용은 HTML 문자열에서 DOM 요소를 생성하는 방법(다양한 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html String if for try using default dom this innerHTML table td tr Access

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.