"JQuery .before()"의 두 판 사이의 차이

2020년 11월 2일 (월) 02:53 기준 최신판

1 개요[ | ]

jQuery .before()

대상 앞에 내용을 추가(또는 이동)하는 jQuery 함수

2 예시 1: 신규 추가[ | ]

<script src="//code.jquery.com/jquery.min.js"></script>

<div class='guys'>한놈</div>
<div class='guys'>두시기</div>

<script>
$('.guys').before("<div>안녕~</div>");
</script>

3 예시 2: 이동 추가[ | ]

선택자 입력시 원본이 이동됨^[1]

<script src="//code.jquery.com/jquery.min.js"></script>
 
<div class='guys'>석삼</div>
<div class='guys'>너구리</div>
<div class='bye'>잘가~</div>
 
<script>
$('.guys').before( $('.bye') );
</script>

4 같이 보기[ | ]

5 주석[ | ]

↑ 단, 목적지 대상항목이 여러 개일 경우, 맨 뒤의 것이 원본이고, 나머지는 사본

6 참고[ | ]

[1] 단, 목적지 대상항목이 여러 개일 경우, 맨 뒤의 것이 원본이고, 나머지는 사본

[1]

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
 ;jQuery .before()
-* 대상 앞에 내용을 추가하는 jQuery 함수
+* 대상 앞에 내용을 추가(또는 이동)하는 jQuery 함수
+==예시 1: 신규 추가==
+<syntaxhighlight lang='html5'>
+<script src="//code.jquery.com/jquery.min.js"></script>
-==예시==
-*예제: http://zetawiki.com/ex/jquery/before.html
-<source lang='html5'>
 <div class='guys'>한놈</div>
 <div class='guys'>두시기</div>
@@ 12번째 줄: / 13번째 줄: @@
 $('.guys').before("<div>안녕~</div>");
 </script>
-</source>
+</syntaxhighlight>
+<jsfiddle height='140'>be7ond7g</jsfiddle>
+==예시 2: 이동 추가==
+*선택자 입력시 원본이 이동됨<ref>단, 목적지 대상항목이 여러 개일 경우, 맨 뒤의 것이 원본이고, 나머지는 사본</ref>
+<syntaxhighlight lang='html5'>
+<script src="//code.jquery.com/jquery.min.js"></script>
+<div class='guys'>석삼</div>
+<div class='guys'>너구리</div>
+<div class='bye'>잘가~</div>
+<script>
+$('.guys').before( $('.bye') );
+</script>
+</syntaxhighlight>
+<jsfiddle height='140'>98y2e4o2</jsfiddle>
 ==같이 보기==
@@ 18번째 줄: / 35번째 줄: @@
 *[[jQuery .prepend()]]
-==참고 자료==
+==주석==
+<references/>
+==참고==
 *http://api.jquery.com/before/
+*http://www.w3schools.com/jquery/html_before.asp
 [[분류: jQuery]]