[HTML_CSS] JQ - insertBefore() 메서드 - 선택요소 앞에 요소삽입/요소추가. (= insertBefore메서드 = 인서트비포어메서드)

목차

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

insertBefore() 예제 -마지막 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>").insertBefore("p:last-child");

  });

});

</script>

<button>클릭</button>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

 

결과보기

insertBefore() 정의

 

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

 

---

cf.

insertAfter() 메서드 

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

 

insertBefore() 구문

 

$(content).insertBefore(selector)

 

---

[매개변수]

 

content

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

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

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

 

selector

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

 

PS. 

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

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

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

 

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

<script>

$(document).ready(function(){

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

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

  });

});

</script>

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

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

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

 

<button>클릭</button>

 

결과보기

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