JavaScript와 함께 추가 및 삽입 방법을 비교합니다

초기로드 후 웹 페이지를 동적으로 업데이트하려면 종종 JavaScript의 Append, AppendChild, InsertAdjacenthtml 또는 InnerHTML 메소드가 필요합니다. 올바른 방법을 선택하면 추가되는 컨텐츠 유형 및 브라우저 호환성을 포함한 여러 요인에 따라 다릅니다.

DOM 이해

웹 사이트는 기본적으로 브라우저가 문서 개체 모델 (DOM) 트리로 렌더링하는 HTML 파일입니다. 이 트리는 HTML 요소 (노드)를 나타내는 중첩 객체로 구성됩니다. "노드", "요소"및 "개체"와 같은 용어는 종종 상호 교환 적으로 사용되며 "객체"는 가장 일반적이고 "HTML 요소"입니다. 이 계층을 이해하는 것은 JavaScript로 DOM을 조작하는 데 중요합니다.

추가 및 삽입 방법

대부분의 부록/삽입 메소드는이 패턴을 따릅니다. Element.method(content) . 요소를 대상으로하려면 document.querySelector() , document.getElementById() document.getElementsByClassName() getElementsByClassName() 은 배열을 반환합니다.

콘텐츠 유형 및 방법 호환성

방법의 선택은 컨텐츠 유형에 크게 의존합니다.

• 노드 : document.createElement() 사용하여 생성하거나 DOM에서 선택한 것입니다. appendChild 와 append 노드와 함께 작동합니다.
• 일반 텍스트 : 간단한 텍스트 문자열. 대부분의 방법은 일반 텍스트를 지원합니다.
• HTML : HTML 문자열. insertAdjacentHTML 및 innerHTML HTML을 직접 처리합니다.

메소드 호환성에 대한 요약은 다음과 같습니다.

방법	노드	일반 텍스트	HTML	인터넷 익스플로러	보안 문제
append	예	예	아니요	아니요	낮은
appendChild	예	아니요	아니요	예	낮은
insertAdjacentHTML	아니요	예	예	예	높음 (비 사양화 된 입력)
innerHTML	아니요	예	예	예	높은 (이벤트 청취자 손실)

올바른 방법을 선택합니다

• 기존 HTML : HTML을 지원하는 메소드 (예 : insertAdjacentHTML )가 가장 쉽습니다.
• JavaScript의 새로운 HTML : 복잡한 HTML을위한 노드 생성은 번거 롭을 수 있습니다. HTML 문자열이 더 간결합니다.
• 이벤트 리스너 : 즉시 이벤트 리스너 첨부 파일을 위해 노드 ( appendChild , append )를 사용하십시오.
• 일반 텍스트 전용 : 일반 텍스트를 지원하는 모든 방법.
• 신뢰할 수없는 HTML : insertAdjacentHTML 또는 innerHTML 사용하기 전에 사용자 제출 HTML을 소독합니다.
• Internet Explorer 호환성 : IE 지원이 필요한 경우 append 피하십시오.

예 : 친구 목록에 추가

새로운 사용자 인 "Dale"을 다른 방법을 사용하여 친구 목록에 추가합시다. 목록에 있다고 가정합니다<ul id="buddies"></ul> <li><a>...</a></li> 와 함께.

append

 const newbuddy = document.createElement ( 'li');
const newlink = document.createElement ( 'a');
Newlink.append ( "Dale");
newbuddy.append (Newlink);
document.querySelector ( '#buddies'). Append (Newbuddy);

appendChild

 const newbuddy = document.createElement ( 'li');
const newlink = document.createElement ( 'a');
newlink.textContent = "Dale";
Newbuddy.appendChild (Newlink);
문서. QuerySelector ( '#buddies'). AppendChild (Newbuddy);

insertAdjacentHTML

 document.querySelector ( '#buddies'). insertAdjacenthtml ( 'preverend', '

골짜기

');

innerHTML (추가에 권장되지 않음)

 document.querySelector ( '#buddies'). innerHtml = '

골짜기

';; // 이것을 피하십시오!

innerHTML 전체 내부 HTML을 대체하여 이벤트 리스너를 제거하기 때문에 문제가됩니다.

데모와 요약

모든 방법을 보여주는 포괄적 인 데모는 여기에서 유리할 것입니다 (간결성을 위해 코드가 생략 됨). 요약 :

• 이벤트 리스너 손실로 인해 innerHTML 추가하십시오.
• append 유연성을 제공하며 간단한 경우에는 효율적이지만 IE 지원이 부족합니다.
• appendChild 는 널리 호환되며 노드 조작에 적합합니다.
• insertAdjacentHTML 정확한 배치를 제공하고 HTML 문자열을 효과적으로 처리하지만 사용자 입력을 신중하게 소독해야합니다.

보다 진보 된 DOM 조작을 위해 before , after , insertBefore 및 insertAdjacentElement 의 추가 탐색이 권장됩니다.

위 내용은 JavaScript와 함께 추가 및 삽입 방법을 비교합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!