[HTML_CSS] JQ - insertAfter() 메서드 ★ - 선택요소 뒤에 요소삽입/요소추가. (= insertAfter메서드 = 인서트에프터메서드)

목차

1. insertAfter() 예제 -마지막 p요소 뒤에 새로운 span 요소 삽입.
2. insertAfter() 정의
3. insertAfter() 구문
4. insertAfter() 예제 - 기존 요소를 삽입.

insertAfter() 예제 -마지막 p요소 뒤에 새로운 span 요소 삽입.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("<span>홈페이지 제작관리</span>").insertAfter("p:last-child");

  });

});

</script>

<button>클릭</button>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

 

결과보기

insertAfter() 정의

 

선택요소 뒤에 HTML 요소를 삽입.

 

---

cf.

insertBefore() 메서드 

: 선택요소 앞에 HTML 요소를 삽입.

 

insertAfter() 구문

 

$(content).insertAfter(selector)

 

---

[매개변수]

 

content

필수. 삽입할 HTML 요소 입력.

※ 반드시, HTML 태그 포함해야 함.

※ 주의: content가 기존 요소일 경우, 위치 이동해 삽입됨. (아래 예제)

 

selector

필수. content 삽입할 위치 지정.

 

PS. 

selector 위치가 일반적인 메서드와는 다르니,

content, selector 위치 바뀌지 않도록 주의.

insertAfter() 예제 - 기존 요소를 삽입.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("div").insertAfter("p");

  });

});

</script>

<p>홈짱닷컴 Homzzang.com.</p>

<p>홈페이지 제작관리 강의</p>

<div>코딩 배우러 오세요.</div>

 

<button>클릭</button>

 

결과보기

PS. 주의: div 위치 이동해서 각각의 P요소 뒤에 삽입됨.