[Dseok의 코딩스터디] javascript & jquery .append() 한방에 끝내기 | 동적 요소 추가 & 활용법

📌 .append()란?

jQuery.append() 메서드는 선택한 요소의 마지막 자식 요소로 새로운 요소를 추가할 때 사용됩니다. 주로 동적 컨텐츠 추가, 리스트 업데이트, 실시간 채팅 메시지 삽입 등에 활용됩니다.

✅ 기본 문법

$(selector).append(content);

• $(selector) : 요소를 선택합니다.
• .append(content) : 선택한 요소의 마지막에 content를 추가합니다.

📌 .append() 활용 예제 7가지

 

1️⃣ 새로운 요소 추가하기

$("#list").append("<li>새로운 아이템</li>");

✅ 설명: <ul id="list"> 요소의 마지막에 새로운 <li> 요소를 추가합니다.

 

2️⃣ 여러 개의 요소 동시 추가

$("#box").append("<p>첫 번째 문장</p><p>두 번째 문장</p>");

✅ 설명: 한 번의 .append() 호출로 여러 개의 <p> 요소를 추가할 수 있습니다.

 

3️⃣ 기존 요소를 다른 곳으로 이동

$("#target").append($("#moveElement"));

✅ 설명: #moveElement를 #target의 마지막 자식 요소로 이동시킵니다.

 

4️⃣ 사용자 입력 값 추가

$("#addButton").on("click", function() {
  let userInput = $("#inputField").val();
  $("#list").append("<li>" + userInput + "</li>");
});

✅ 설명: 버튼 클릭 시 #inputField에서 입력한 값을 <li> 요소로 추가합니다.

 

5️⃣ 애니메이션과 함께 요소 추가

$("#addButton").on("click", function() {
  $("#container").append("<div class='box'>새로운 박스</div>").find(".box:last").hide().fadeIn(500);
});

✅ 설명: .fadeIn()을 사용해 새로운 박스를 서서히 나타나도록 설정합니다.

 

6️⃣ Ajax 데이터 추가하기

$.get("data.txt", function(data) {
  $("#content").append("<p>" + data + "</p>");
});

✅ 설명: data.txt 파일에서 데이터를 가져와 <p> 요소로 추가합니다.

 

7️⃣ 클릭 시 새로운 버튼 추가 및 동작 설정

$("#addButton").on("click", function() {
  $("#buttonContainer").append("<button class='dynamicBtn'>새 버튼</button>");
});

$(document).on("click", ".dynamicBtn", function() {
  alert("새 버튼 클릭됨!");
});

✅ 설명: 동적으로 생성된 버튼에도 이벤트를 적용하려면 $(document).on()을 사용해야 합니다.

 

📌 마무리 🎯

• .append()는 선택한 요소의 마지막에 콘텐츠를 추가하는 데 사용됩니다.
• 기존 요소 이동, 사용자 입력 추가, 애니메이션 효과 적용, Ajax 활용 등 다양한 활용이 가능합니다.
• 동적으로 생성된 요소에는 $(document).on()을 사용해 이벤트를 바인딩해야 합니다.

🚀 이제 .append()를 활용해서 동적 콘텐츠를 추가하는 기능을 직접 구현해 보세요!