반응형
SMALL
📌 .after()란?
jQuery.after() 메서드는 선택한 요소의 바로 다음 위치에 새로운 요소를 삽입하는 기능을 합니다. 즉, 기존 요소 뒤에 새로운 요소를 추가할 때 사용됩니다.
요소를 무조건 뒤에 새로 추가한다!!
✅ 기본 문법
$(selector).after(content);- selector : 기준이 되는 요소
- content : 추가할 요소 (HTML, 텍스트, jQuery 객체 등 가능)
📌 .after() 실용 예제 10가지
1️⃣ 텍스트 뒤에 요소 추가하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
<p>안녕하세요! </p>
<script>
$("p").after("<b>반갑습니다!</b>");
</script>
</body>
</html>✅ 설명: <p> 태그 뒤에 <b> 태그를 추가하여 "반갑습니다!"라는 텍스트를 강조합니다.
2️⃣ 버튼 클릭 시 요소 추가
<button id="add">추가</button>
<p>여기 뒤에 추가됩니다.</p>
<script>
$("#add").click(function() {
$("p").after("<span> 새로운 요소! </span>");
});
</script>✅ 설명: 버튼 클릭 시 <p> 태그 뒤에 <span> 요소가 추가됩니다.
3️⃣ 여러 요소 뒤에 새로운 요소 추가
<ul>
<li>사과</li>
<li>바나나</li>
</ul>
<script>
$("li").after("<li>포도</li>");
</script>✅ 설명: <li> 태그 뒤에 "포도" 항목이 추가됩니다.
4️⃣ 입력 필드 뒤에 메시지 추가
<input type="text" id="name" placeholder="이름 입력">
<script>
$("#name").after("<span> * 필수 입력</span>");
</script>✅ 설명: 입력 필드 뒤에 "* 필수 입력"이라는 메시지를 추가합니다.
5️⃣ 아이콘 추가
<button>저장</button>
<script>
$("button").after("<i class='icon-save'>✔</i>");
</script>✅ 설명: 버튼 뒤에 체크 아이콘을 추가하여 저장 기능을 나타냅니다.
6️⃣ 동적으로 경고 메시지 추가
<div class="form">
<input type="text" id="email" placeholder="이메일 입력">
<button id="check">확인</button>
</div>
<script>
$("#check").click(function() {
if($("#email").val() === "") {
$("#email").after("<span style='color:red;'>이메일을 입력하세요!</span>");
}
});
</script>✅ 설명: 이메일 입력 필드가 비어있으면 경고 메시지를 표시합니다.
7️⃣ 리스트 뒤에 이미지 추가
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<script>
$("ul").after("<img src='logo.png' alt='로고'>");
</script>✅ 설명: <ul> 리스트 뒤에 이미지를 추가합니다.
8️⃣ 요소 여러 개 뒤에 새로운 요소 추가
<div class="box">첫 번째</div>
<div class="box">두 번째</div>
<script>
$(".box").after("<p>추가된 문단</p>");
</script>✅ 설명: .box 클래스가 있는 모든 요소 뒤에 <p> 요소를 추가합니다.
9️⃣ 특정 조건 만족 시 요소 추가
<input type="checkbox" id="agree"> 동의합니다
<script>
$("#agree").change(function() {
if($(this).is(":checked")) {
$(this).after("<span> 감사합니다!</span>");
}
});
</script>✅ 설명: 체크박스를 체크하면 "감사합니다!" 메시지를 표시합니다.
🔟 기존 요소 뒤에 AJAX로 데이터 추가
<button id="loadData">데이터 불러오기</button>
<div id="data"></div>
<script>
$("#loadData").click(function() {
$("#data").after("<p>{서버에서 불러온 데이터}</p>");
});
</script>✅ 설명: AJAX 요청 후 데이터를 기존 요소 뒤에 동적으로 추가하는 기능입니다.
📌 마무리 🎯
- .after()는 선택한 요소의 다음 위치에 새로운 요소를 추가하는 기능
- 버튼 클릭, 입력 필드, 리스트, AJAX 등 다양한 상황에서 활용 가능
- 사용자 경험 향상을 위해 동적 UI 요소 추가 시 유용하게 사용됨
🚀 이제 .after()를 활용하여 동적인 웹 페이지를 만들어 보세요!
반응형
LIST