`element.innerHTML = \'...\'`를 사용하는 것이 왜 나쁜 습관입니까?

Element.innerHTML을 추가할 때의 위험

element.innerHTML = "..."을 사용하여 요소를 연결한다는 속삭임을 들어보셨을 것입니다. 코딩 금지입니다. 하지만 그 안에 있는 해로움은 정확히 무엇입니까?

다음 코드 조각을 고려하세요.

var str = "<div>hello world</div>";
var elm = document.getElementById("targetID");

elm.innerHTML += str; // Not recommended?

문제는 HTML의 반복적인 구문 분석과 렌더링에 있습니다. innerHTML이 할당될 때마다 브라우저는 HTML을 구문 분석하고 DOM을 구성하여 문서에 삽입해야 합니다. 이 프로세스는 시간이 많이 걸리고 복잡한 HTML 구조의 경우 특히 힘들 수 있습니다.

따라서 요소를 간단히 추가하기 위해 innerHTML =을 사용하는 것은 권장되지 않습니다. 대신,appendChild 메소드를 선택하세요:

var newElement = document.createElement('div');
newElement.innerHTML = '<div>Hello World!</div>';
elm.appendChild(newElement);

appendChild를 사용하면 불필요한 재분석을 피하고 기존 DOM 요소의 무결성을 유지할 수 있습니다.

참고: 일부 브라우저에서는 = 연산자를 최적화할 수 있지만 성능 최적화를 위해 이 동작에 의존하지 않는 것이 가장 좋습니다.

위 내용은 `element.innerHTML = '...'`를 사용하는 것이 왜 나쁜 습관입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!