`document.write()`를 피하는 이유와 더 나은 대안은 무엇입니까?

document.write의 대안: 이를 피하는 이유와 대신 사용할 방법

document.write 방지

HTML 튜토리얼에서는 document.write()가 일반적으로 소개되지만 사용이 권장되지 않는 경우가 많습니다. 이는 document.write에 심각한 제한이 있기 때문입니다:

• 전체 문서 덮어쓰기: 페이지가 로드된 후 사용되면 document.write()는 기존 HTML 전체를 지우고 대체합니다. 제공된 콘텐츠와 함께 사용하세요.
• 잘못된 XHTML: document.write()는 엄격한 XHTML에서 유효하지 않습니다. code.
• 성능 문제: document.write()는 특히 반복적으로 사용할 경우 브라우저 성능에 부정적인 영향을 미칠 수 있습니다.

document.write의 대안

다음은 대부분의 경우에 더 적합한 document.write에 대한 몇 가지 대안입니다. 상황:

createElement() 및appendChild()

이 접근 방식에는 createElement()를 사용하여 새 HTML 요소를 생성하고 이를appendChild()를 사용하여 DOM에 추가하는 작업이 포함됩니다. 기존 페이지를 덮어쓰지 않고 콘텐츠를 삽입할 수 있습니다.

innerHTML

innerHTML은 기존 요소 내에 콘텐츠를 설정하는 데 사용할 수 있는 속성입니다. 이 방법은 나머지 콘텐츠에 영향을 주지 않고 페이지의 특정 부분을 업데이트하는 데 편리합니다.

insertAdjacentHTML()

이 방법을 사용하면 관련 HTML 코드를 삽입할 수 있습니다. 지정된 요소. 요소 앞, 뒤 또는 내부에 삽입하기 위한 다양한 옵션을 제공합니다.

예

createElement() 및appendChild()의 사용법을 설명하려면 다음을 고려하십시오. 코드:

const container = document.getElementById('container');
const newElement = document.createElement('p');
newElement.textContent = 'Hello, world!';
container.appendChild(newElement);

이 코드는

"Hello, world!"라는 텍스트가 있는 요소 기존 콘텐츠를 덮어쓰지 않고 컨테이너 요소에 추가합니다.

위 내용은 `document.write()`를 피하는 이유와 더 나은 대안은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!