JavaScript에서 DOM에 원시 HTML 문자열을 안전하게 추가하려면 어떻게 해야 합니까?

추가를 위해 원시 HTML 문자열을 DOM 요소로 변환

JavaScript는 innerHTML 또는 innerText 속성 수정을 포함하여 HTML 콘텐츠를 조작하는 다양한 방법을 제공합니다. DOM 요소. 그러나 경우에 따라appendChild()와 같은 메서드와 함께 사용하기 위해 원시 HTML 문자열을 DOM 요소로 변환해야 합니다.

DOMParser 사용

DOMParser 인터페이스를 사용하면 구문 분석이 가능합니다. XML 및 HTML 문자열을 DOM 요소로 변환합니다. DOMParser를 사용하여 원시 HTML 문자열을 DOM 요소로 변환하려면:

var xmlString = "<div><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");

parseFromString() 메서드는 HTML 문자열을 구문 분석하고 구문 분석된 DOM 구조가 포함된 Document 객체를 반환합니다.

DOM 요소 액세스

파싱된 문서 내의 개별 DOM 요소에 액세스하려면:

console.log(doc.firstChild.innerHTML); // Outputs: <a href='#'>Link...</a>
console.log(doc.firstChild.firstChild.innerHTML); // Outputs: Link

사용

파싱된 DOM 요소는 다음을 수행할 수 있습니다. 이제appendChild()에 전달되거나 다음과 같은 다른 DOM 조작 작업에 사용됩니다.

var parentElement = document.getElementById("container");
parentElement.appendChild(doc.firstChild);

이것은 구문 분석된 HTML 문자열을 #container 요소에 DOM 요소로 효과적으로 추가합니다.

참고: 원시 HTML 문자열을 직접 추가하는 대신 DOMParser를 통해 얻은 구문 분석된 DOM 요소와 함께appendChild()를 사용하는 것이 중요합니다. 후자는 보안 취약점을 초래할 수 있습니다.

위 내용은 JavaScript에서 DOM에 원시 HTML 문자열을 안전하게 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!