DOM에 HTML을 안전하고 효율적으로 삽입하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

DOM에 HTML을 안전하고 효율적으로 삽입하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-04 13:11:01

원래의

443명이 탐색했습니다.

How to Inject HTML into Your DOM Safely and Efficiently?

DOM에 HTML 삽입: 종합 가이드

DOM에 HTML 문자열을 추가하는 것은 웹 개발의 일반적인 작업입니다. 이 기사에서는 금지된 innerHTML 속성을 사용하지 않고 이를 달성할 수 있는 효과적인 방법을 살펴보겠습니다.

문서에 HTML을 동적으로 추가하려면 다음을 활용하는 것이 좋습니다. insertAdjacentHTML() 메소드. 이 기능은 최신 브라우저에서 보편적으로 지원되며 DOM을 조작하는 안전하고 효율적인 방법을 제공합니다.

insertAdjacentHTML() 메서드는 두 가지 매개 변수를 사용합니다.

위치: HTML을 삽입하려는 위치입니다. 유효한 값은 다음과 같습니다.
- beforebegin: 요소 시작 전
- afterbegin: 요소 내부, 첫 번째 하위 요소 전
- beforeend: 요소 내부, 이후 마지막 자식
- afterend: 요소의 끝 이후
html: 삽입하려는 HTML 문자열

ID가 test인 요소입니다. 이 요소에 HTML 문자열을 추가하려면 다음 코드를 사용합니다.

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

로그인 후 복사

이렇게 하면 HTML이

시각적 데모를 보려면 다음 JSFiddle을 방문하세요. http://jsfiddle.net/euQ5n/

insertAdjacentHTML()을 사용하면 DOM 조작을 위한 강력하고 상호 호환 가능한 솔루션이 제공됩니다. 웹페이지에 HTML 문자열을 쉽게 삽입할 수 있는 기능을 활용해 보세요.

위 내용은 DOM에 HTML을 안전하고 효율적으로 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

본 웹사이트의 성명

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

저자별 최신 기사

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

1894

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

2057

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

1729

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

1631

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

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

1644