모든 곳에 insertAdjacentHTML

Paul Kinlan

HTML 문서에 콘텐츠를 삽입하는 방법에는 세 가지가 있습니다.

• createNode 및 appendChild와 같은 DOM 메서드 사용
• 문서 프래그먼트 사용
• innerHTML 사용

일부 사용 사례에는 document.write도 있다고 할 수 있습니다.

innerHTML는 HTML5에서 표준화되었으며, innerHTML와 동일하게 작동하지만 HTML 콘텐츠를 삽입할 위치(beforeBegin, afterBegin, beforeEnd, afterEnd)를 더 구체적으로 정의할 수 있는 형제 메서드 insertAdjacentHTML도 함께 표준화되었습니다.

var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");

2008년에 존 리시그는 insertAdjacentHTML에 관한 도움말을 작성했으며 다음과 같은 결론을 내렸습니다.

참고: 브라우저에서 이 메서드를 구현하면 훌륭한 JavaScript 라이브러리를 작성하는 데 필요한 코드의 양이 크게 줄어듭니다. querySelectorAll과 함께 이 메서드를 더 광범위하게 사용할 수 있게 되어 코드를 대대적으로 단순화할 수 있기를 기대합니다.

지금까지 insertAdjacentHTML의 주요 문제는 브라우저 지원이 부족하다는 점입니다. Firefox 버전 8부터 insertAdjacentHTML을 구현함에 따라 모바일 브라우저를 비롯한 모든 주요 브라우저에서 사용할 수 있습니다. 지금 사용하고 8보다 이전 버전의 Firefox에서 작동하는지 확인하려면 이 폴리필을 사용하면 됩니다.