.insertBefore()
선택한 타겟 요소 이전에 새로운 요소를 추가합니다.
.insertBefore()
정의
.insertBefore("타겟") 메서드는 타겟 요소 이전에 새로운 요소를 추가합니다.
문법
$("선택자").insertBefore("타겟");
Sample1 
.insertBefore() : 선택한 요소 다음에 요소를 추가하는 예제입니다.
결과
속성(Attributes)
- .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
- .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
- .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
jquery
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
$("<li class='bLine'>.after()를 이용한 추가</li>").insertAfter(".list1 li");
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
$("<li class='rLine'>.before()를 이용한 추가</li>").insertBefore(".list1 li");
});html
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
.bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
</style>
</head>
<body>
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>
<div class="choice1">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">요소 다음에 <em>.insertAfter()</em> 컨텐츠를 추가합니다.</a>
<a href="#" class="btn2">요소 이전에 <em>.insertbefore()</em> 컨텐츠를 추가합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice1 .off1").on("click", function(e){
e.preventDefault();
$(".list1 li").remove();
$(".list1 ul").append().html("<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li><li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li><li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li><li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>");
});
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
$("<li class='bLine'>.after()를 이용한 추가</li>").insertAfter(".list1 li");
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
$("<li class='rLine'>.before()를 이용한 추가</li>").insertBefore(".list1 li");
});
</script>
</body>
</html>호환성(Compatibility)
| 메서드 | 버전 |  |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| insertBefore() | jQeury 1.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| jQeury 2.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | |
| jQeury 3.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
