>웹 프론트엔드 >JS 튜토리얼 >innerHTML을 사용하지 않고 HTML을 DOM에 추가하는 방법은 무엇입니까?

innerHTML을 사용하지 않고 HTML을 DOM에 추가하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-03 23:46:31749검색

How to Append HTML to the DOM Without Using innerHTML?

InnerHTML을 사용하지 않고 DOM에 HTML 추가

HTML 문자열을 DOM에 추가할 때 div.innerHTML =을 사용하는 시나리오가 발생할 수 있습니다. str; 받아 들일 수 없습니다. 이러한 경우 모든 최신 브라우저에서 지원되는 insertAdjacentHTML 메소드를 활용할 수 있습니다.

ID가 "test"인 div에 HTML 문자열을 추가하려면 다음 코드를 사용할 수 있습니다.

var str = '<p>Just some <span>text</span> here</p>';
var div = document.getElementById('test');
div.insertAdjacentHTML('beforeend', str);

insertAdjacentHTML 메소드를 사용하면 지정된 요소의 끝 앞에 HTML 문자열을 삽입하여 요소 내부에 삽입되도록 할 수 있습니다. "beforeend" 위치 매개변수는 HTML이 요소의 마지막 하위 요소 뒤에 추가되어야 함을 지정합니다.

insertAdjacentHTML 메소드를 활용하면 HTML을 DOM에 추가하는 다양하고 효율적인 방법이 있습니다. 특정 상황에서 성능에 영향을 미치고 보안 취약성을 가질 수 있는 innerHTML 속성.

위 내용은 innerHTML을 사용하지 않고 HTML을 DOM에 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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