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

div.innerHTML을 사용하지 않고 DOM에 HTML 추가

HTML 문자열을 DOM에 추가하려고 할 때 div.innerHTML = str의 일반적인 접근 방식은 다음과 같이 보일 수 있습니다. 편리하지만 잠재적인 보안 문제로 인해 사용하지 않는 경우가 많습니다. 이 질문은 HTML 문자열을 특정 요소에 추가하는 대체 솔루션을 탐색합니다.

이 시나리오에서 작업은 HTML 문자열

일부 텍스트 여기

ID 테스트가 포함된 요소입니다. 이를 달성하기 위해 선호되는 접근 방식은 모든 최신 브라우저에서 지원되는 insertAdjacentHTML 메서드를 활용하는 것입니다.

이를 수행하는 방법은 다음과 같습니다.

div.insertAdjacentHTML('beforeend', str);

insertAdjacentHTML 메서드는 두 개의 매개 변수를 사용합니다.

• 위치: 대상 요소 내에서 HTML 콘텐츠를 삽입할 위치를 나타냅니다. 이 경우 beforeend는 마지막 하위 항목 뒤에 요소 내부에 콘텐츠를 추가합니다.
• HTMLString: 삽입할 HTML 문자열.

div.insertAdjacentHTML('beforeend', str)은 HTML 문자열이

요소를 사용하여 DOM 구조를 유지하면서 innerHTML 사용과 관련된 잠재적인 보안 문제를 피합니다.

이 솔루션의 라이브 데모는 여기에서 찾을 수 있습니다: http://jsfiddle.net/euQ5n/

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

원천：php.cn

이전 기사：React.js에서 Vue.js로 전환을 시도했습니다. 다음 기사：HTML을 이미지로 렌더링하는 데 가장 적합한 방법은 무엇입니까?

본 웹사이트의 성명

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

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

3

2054

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

2211

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1865

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1750

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1775

관련 주제

더>

• 오늘의 리플 시장
• 블로그를 만드는 방법
• 두 개의 div를 나란히 표시하는 방법
• WeChat Moments, 대시 2개와 점 1개
• pscs5 설치 일련 번호
• 듀얼 그래픽 카드 노트북
• 집합의 일반적인 용도
• 컴퓨터 네트워크의 기능은 무엇입니까