[jQuery] DOM에 새로운 요소를 추가

📌 append() 말고 다른 방법으로 요소 추가하는 방법

append() 외에도 jQuery에는 새로운 요소를 추가하는 다양한 메서드가 있습니다. 상황에 따라 적절한 방법을 선택하면 성능 최적화나 코드 가독성을 높일 수 있습니다.

---

🔹 요소를 추가하는 주요 jQuery 메서드 비교

메서드 추가 위치 기존 요소 유지 여부 설명

append()	내부 마지막	유지	부모 요소의 마지막 자식 요소로 추가
prepend()	내부 첫 번째	유지	부모 요소의 첫 번째 자식 요소로 추가
after()	외부 뒤	유지	선택한 요소 다음 형제로 추가
before()	외부 앞	유지	선택한 요소 이전 형제로 추가
html()	내부 변경	삭제됨	기존 요소를 모두 지우고 새로운 내용 추가
replaceWith()	외부 변경	삭제됨	선택한 요소를 완전히 대체
clone()	-	유지	요소를 복제하여 추가

---

🔹 append() 대체 가능한 방법들

✅ 1. prepend() – 내부 앞에 추가

$("#container").prepend('<div class="new-item">새로운 요소 (맨 앞)</div>');

🔹 prepend()는 부모 요소 내부의 첫 번째 자식 요소로 추가.

---

✅ 2. after() – 요소 뒤에 추가

$("#targetElement").after('<div class="new-item">이 요소 뒤에 추가됨</div>');

🔹 after()는 선택한 요소 바로 뒤에 형제로 추가.

---

✅ 3. before() – 요소 앞에 추가

$("#targetElement").before('<div class="new-item">이 요소 앞에 추가됨</div>');

🔹 before()는 선택한 요소 앞에 형제로 추가.

---

✅ 4. html() – 기존 내용 삭제 후 추가 (주의)

$("#container").html('<div class="new-item">기존 요소를 지우고 새 요소 추가</div>');

🔹 주의: 기존의 내용이 모두 삭제되므로, 새로운 요소만 남게 됨.

---

✅ 5. replaceWith() – 기존 요소 대체

$("#targetElement").replaceWith('<div class="new-item">이전 요소를 대체함</div>');

🔹 기존 #targetElement가 삭제되고 새로운 요소로 교체됨.

---

✅ 6. clone() – 요소 복제 후 추가

$("#targetElement").clone().appendTo("#container");

🔹 기존 요소를 복제하여 #container의 마지막 자식으로 추가.

---

🔹 여러 개의 요소를 추가할 때 성능 최적화 방법

(❌ 비효율적인 방식: 여러 번 append() 호출)

for (let i = 0; i < 5; i++) {
    $("#container").append(`<div class="new-item">새 요소 ${i}</div>`);
}

🔹 여러 번 append()를 호출하면 DOM 조작이 반복되어 성능 저하 발생.

(✅ 최적화된 방식: 문자열을 미리 만들어 한 번에 추가)

let elements = "";
for (let i = 0; i < 5; i++) {
    elements += `<div class="new-item">새 요소 ${i}</div>`;
}
$("#container").append(elements);

🔹 문자열을 한 번에 추가하여 렌더링 부담을 줄임.

---

🔥 결론

1. 내부 추가
   • append(): 내부 마지막에 추가
   • prepend(): 내부 첫 번째에 추가
2. 외부 추가 (형제 요소로 추가)
   • after(): 선택한 요소 뒤
   • before(): 선택한 요소 앞
3. 기존 요소 변경
   • html(): 기존 요소를 삭제하고 새 요소 추가
   • replaceWith(): 기존 요소를 새 요소로 대체
4. 복제 후 추가
   • clone(): 기존 요소를 복제하여 추가
5. 성능 최적화
   • 여러 개의 요소를 추가할 때는 += 방식으로 한 번에 추가하는 것이 성능상 유리

📌 필요에 따라 적절한 방법을 선택하면 더욱 효율적인 코드를 작성할 수 있습니다! 🚀
추가 질문 있으면 언제든지 주세요! 😊