insertAdjacentHTML와 insertAdjacentElement 차이점

웹 개발에서 돔(DOM) 조작은 필수적인 스킬 중 하나입니다. 돔을 조작할 때 사용되는 여러 메서드 중 insertAdjacentHTML와 insertAdjacentElement는 비슷한 이름을 가지고 있지만, 다른 용도와 동작 방식을 가지고 있습니다. 이 두 메서드의 차이점을 살펴보고, 어떤 상황에서 어떻게 사용해야 하는지 알아보겠습니다.

1. insertAdjacentHTML

insertAdjacentHTML 메서드는 지정한 HTML 문자열을 현재 요소의 어느 위치에 삽입할지 지정하는 데 사용됩니다. 이 메서드를 사용하면 HTML 문자열을 파싱하여 돔 요소로 변환한 후 삽입합니다.

사용법

element.insertAdjacentHTML(position, text);

element: HTML을 삽입할 요소
position: 삽입 위치를 나타내는 문자열
- "beforebegin": 현재 요소의 이전 형제 요소로 삽입
- "afterbegin": 현재 요소의 첫 번째 자식으로 삽입
- "beforeend": 현재 요소의 마지막 자식으로 삽입
- "afterend": 현재 요소의 다음 형제 요소로 삽입
text: 삽입할 HTML 문자열

2. insertAdjacentElement

insertAdjacentElement 메서드는 지정한 돔 요소를 현재 요소의 어느 위치에 삽입할지 지정하는 데 사용됩니다. 이 메서드를 사용하면 돔 요소를 직접 삽입할 수 있습니다.

사용법

element.insertAdjacentElement(position, elementToInsert);

element: 돔 요소를 삽입할 요소
position: 삽입 위치를 나타내는 문자열
- "beforebegin": 현재 요소의 이전 형제 요소로 삽입
- "afterbegin": 현재 요소의 첫 번째 자식으로 삽입
- "beforeend": 현재 요소의 마지막 자식으로 삽입
- "afterend": 현재 요소의 다음 형제 요소로 삽입
elementToInsert: 삽입할 돔 요소

3. 차이점 비교

이 두 메서드의 가장 큰 차이점은 삽입할 내용의 형태입니다. insertAdjacentHTML은 HTML 문자열을 파싱하여 삽입하므로 문자열 형태의 내용을 삽입할 때 유용합니다. 반면, insertAdjacentElement는 직접 돔 요소를 삽입하므로 이미 생성된 돔 요소를 삽입할 때 사용됩니다.

insertAdjacentHTML

insertAdjacentHTML 메서드는 HTML 문자열을 파싱하여 돔 요소를 생성하고, 지정한 위치에 해당 돔 요소를 삽입하는 역할을 합니다. 이 때문에 주로 HTML 문자열을 동적으로 생성하여 돔에 추가할 때 사용됩니다.

var target = document.getElementById("targetElement");
target.insertAdjacentHTML("beforeend", "<p>HTML 문자열을 삽입합니다.</p>");

이 메서드는 주로 HTML 문자열을 이용해 돔을 조작할 때 유용하며, 문자열을 파싱하여 삽입하기 때문에 HTML을 잘 이해하고 사용해야 합니다. 또한, 보안에 주의해야 하며 사용자 입력을 신뢰하지 않는 경우 크로스 사이트 스크립팅 (XSS) 공격에 취약할 수 있습니다.

insertAdjacentElement

insertAdjacentElement 메서드는 이미 생성된 돔 요소를 지정한 위치에 삽입하는 역할을 합니다. 이 메서드는 돔 요소를 직접 삽입하기 때문에 HTML 문자열을 파싱하지 않습니다.

var target = document.getElementById("targetElement");
var newElement = document.createElement("p");
newElement.textContent = "돔 요소를 삽입합니다.";
target.insertAdjacentElement("beforeend", newElement);

이 메서드는 이미 생성된 돔 요소를 재사용하고자 할 때 유용합니다. 또한, 보안상의 이슈는 HTML 문자열을 사용하는 insertAdjacentHTML에 비해 상대적으로 적습니다.

4. 어떤 상황에서 어떤 걸 사용해야 할까?

insertAdjacentHTML 사용 시:
- 동적으로 HTML 문자열을 생성하여 삽입해야 할 때
- 문자열을 파싱하여 돔 요소로 변환하려는 경우
insertAdjacentElement 사용 시:
- 이미 생성된 돔 요소를 삽입해야 할 때
- 생성한 돔 요소를 여러 번 재사용해야 하는 경우

결론

insertAdjacentHTML와 insertAdjacentElement는 돔 조작을 위한 메서드로, 각각 HTML 문자열과 돔 요소를 삽입하는 데 사용됩니다. 이 두 메서드의 차이를 이해하고 상황에 맞게 활용하면 효과적인 웹 개발이 가능해집니다.

자주 묻는 질문 (FAQs)

Q1: `insertAdjacentHTML`과 `innerHTML`은 어떤 차이가 있나요?

A1: insertAdjacentHTML은 지정한 위치에 HTML 문자열을 삽입하고, 문자열을 파싱하여 돔 요소로 변환합니다. innerHTML은 지정한 요소의 내용을 HTML 문자열로 대체합니다.

Q2: `insertAdjacentElement`를 사용할 때 어떤 돔 요소를 삽입할 수 있나요?

A2: insertAdjacentElement를 사용하여 이미 생성된 돔 요소를 삽입할 수 있습니다. 이 때, 삽입하려는 돔 요소는 이미 존재해야 합니다.

Q3: 이 두 메서드 중 어떤 것을 사용하는 것이 더 효율적인가요?

A3: 사용하려는 내용과 상황에 따라 다릅니다. HTML 문자열을 동적으로 생성하여 삽입해야 할 경우 insertAdjacentHTML을 사용하고, 이미 생성된 돔 요소를 삽입해야 할 경우 insertAdjacentElement를 사용하세요.

Q4: `insertAdjacentHTML`을 사용할 때 보안에 주의해야 하나요?

A4: 네, 사용자 입력을 포함한 외부 문자열을 사용할 때 보안에 주의해야 합니다. 사용자 입력을 신뢰하지 않고 삽입할 경우 크로스 사이트 스크립팅(Cross-Site Scripting, XSS) 공격에 취약할 수 있습니다.

Q5: 돔 요소를 삽입하는 다른 방법도 있나요?

A4: 네, 위에서 거론한 두 가지 명령 말고도 여러가지가 있습니다. 다음의 포스팅 주소를 참고해서 알아보세요.
https://ljj.kr/js-html에-내용을-추가하는-여러가지-방법돔요소-추가