JavaScript에서 HTML 문자열을 DOM 요소로 어떻게 변환할 수 있나요?

HTML 문자열에서 DOM 요소 생성

JavaScript에서는 HTML 문자열을 해당 DOM 요소로 변환해야 하는 경우가 있습니다. 이는 문서에 요소를 추가할 때와 같이 페이지 콘텐츠를 동적으로 생성하고 조작하기 위한 기본 작업입니다.

이 작업을 수행하려면 DOMParser를 활용할 수 있습니다. DOMParser 사용 구문은 다음과 같습니다.

const doc = new DOMParser().parseFromString(htmlString, "text/xml");

여기서 htmlString은 변환하려는 HTML 코드를 나타내고 doc는 구문 분석된 DOM 요소가 포함된 결과 문서입니다.

예를 들어 다음을 고려하세요. 다음 HTML 문자열:

<div>
    <a href="#"></a>
    <span></span>
</div>

DOMParser를 사용하면 다음과 같이 이 문자열을 DOM 요소로 변환할 수 있습니다.

const htmlString = "
";
const doc = new DOMParser().parseFromString(htmlString, "text/xml");

이제 doc 객체는 구문 분석된 HTML을 DOM으로 보유합니다. 이 요소는appendChild():

const parentElement = document.getElementById('parent');
parentElement.appendChild(doc.firstChild);

와 같은 메서드를 사용하여 페이지에 추가할 수 있습니다. 이렇게 하면 구문 분석된 HTML 콘텐츠가 실제 DOM에 있는 parentElement의 하위 요소로 추가됩니다. DOMParser는 위의 예와 같이 닫는 태그가 필요한 XHTML 스타일 HTML을 해석합니다.

위 내용은 JavaScript에서 HTML 문자열을 DOM 요소로 어떻게 변환할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!