HTML 문자열에서 DOM 요소를 생성하는 방법(다양한 방법)-JS 튜토리얼-php.cn

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

PHPz

풀어 주다： 2024-08-01 20:18:42

원래의

1197명이 탐색했습니다.

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

내부 HTML

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

로그인 후 복사

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

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

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

innerHTML + 템플릿 요소

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

로그인 후 복사

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

insert인접 HTML

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

로그인 후 복사

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

DOMParser

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

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

로그인 후 복사

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

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

Range.createContextualFragment

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

로그인 후 복사

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

결론

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

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

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