목차
- after() 예제 - P 요소 뒤에 내용 넣기
- after() 정의
- after() 구문
- after() 예제 - 매개변수 사용법
after() 예제 - P 요소 뒤에 내용 넣기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").after("<p>놀러 오세요.</p>");
});
});
</script>
<button>클릭</button>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
결과보기
after() 정의
선택요소 뒤에 지정 내용 삽입.
cf.
before() 메서드 - 선택요소 앞에 지정 내용 삽입.
after() 구문
$(selector).after(content,function(index))
[매개변수]
content
필수. 삽입할 콘텐츠 지정. (HTML 태그 포함 가능).
※ 가능값은 아래와 같음. (아래 예제1 참고)
・HTML 요소
・jQuery 객체
・DOM 요소
function (index)
삽입할 내용을 반환하는 함수. (아래 예제2 참조)
※ index - 요소 집합에서 요소의 인덱스 위치 반환.
after() 예제 - 매개변수 사용법
[예제1] HTML 요소, jQuery 객체, DOM 요소
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function afterText() {
var txt1 = "<b>Welcome</b>"; // HTML 요소
var txt2 = $("<i></i>").text(" to "); // jQuery 객체
var txt3 = document.createElement("b"); // DOM 요소
txt3.innerHTML = "my homepage.";
$("#hz").after(txt1, txt2, txt3); // 뒤에 요소 추가.
}
</script>
<button onclick="afterText()">클릭</button>
<p id='hz'>홈짱닷컴 Homzzang.com</p>
결과보기
[예제2] 요소 색인번호 반환 함수
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").after(function(n){
return "<div>" + n + "번째 P요소.</div>";
});
});
});
</script>
<button>클릭</button>
<p>홈짱닷컴 Homzzang.com</p>
<p>코딩언어 그누보드 강의</p>
<p>홈페이지 제작관리 강의</p>
결과보기
