본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - 앞에 추가하기, before()

by zoo10 2011. 11. 22.

.before()

원문 링크 http://api.jquery.com/before/

.before( content, [content] )Returns : String

개요 : 선택된 요소 앞(before)에 인자로 주어진 요소를 삽입합니다.

  • .before( content, [content] )
  • content 삽입될 요소(HTML string, DOM element, jQuery object)
  • content 추가로 삽입될 하나 이상의 요소들 (DOM elements, arrays of elements, HTML strings, jQuery objects)
  • .before( function )
  • function 추가될 요소를 반환하는 함수. 함수는 HTML string, DOM element(s), jQuery object 등을 반환합니다.

.before() 함수와 .insertBefore() 함수는 같은 작업을 수행합니다. 두 함수 사이에 가장 큰 차이점은 사용법입니다. .before() 함수는 추가될 요소를 선택하는 구문이 앞쪽에 위치하고 함수 내부의 인자가 삽입되는 반면, .insertBefore() 함수는 추가될 인자가 함수 앞쪽에 위치하고 함수의 인자가 선택하는 구문이 된다는 점입니다. 복잡한 말 같지만 둘 중에 하나만 알고 있어도 되겠네요. 어차피 결과는 같으니까요.

아래 마크업을 보시죠.

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

여러 요소 앞에 새로운 요소를 추가하고 싶으면 아래와 같이 스크립트를 추가하면 됩니다.

$('.inner').before('<p>Test</p>');

결과를 보시면 아하 하실겁니다. 아래가 결과입니다.

<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>

또한 특정한 요소를 선택한 요소 앞으로 이동시킬 수도 있습니다.

$('.container').before($('h2'));

만약 위와같이 스크립트를 작성하면 아래와 같이 h2 태그가 이동하게 됩니다.(복사되는 것이 아닙니다.)

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

하지만 선택된 요소가 두개 이상이라면 첫번째 요소는 이동되고 나머지는 복사되어 추가되게 됩니다. (이 내용은 반복적으로 나오는데 아 그렇구나 정도만 알고 계심 될것 같네요. 번역만 어렵지 별로 중요한 내용은 아닙니다. 물론 실제 구현 부분에서는요.)

추가 인자들 ( Additional Arguments )

추가될 인자를 사용하는 방법은 .prepend(), .after(), .before() 함수들에 아래와 같은 방법으로 동일하게 적용할 수 있습니다. 인자는 DOM elements, jQuery objects, HTML strings, 그리고 DOM element 배열들을 포함합니다.

예를 들어, 두 개의 <div>를 새로 만들어 추가하려면 아래와 같이 하면 됩니다.

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');
	$('p').first().before($newdiv1, [newdiv2, existingdiv1]);

추가할 수 있는 인자수는 제한이 없습니다. 또한, 위의 방법 말고 인자를 쭈욱 나열하는 방법도 있는데 위와 아래는 같은 결과를 보여줍니다.

$('p').first().before($newdiv1, newdiv2, existingdiv1)

예 제  
모든 p 태그 앞에 특정 요소를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p> is what I said...</p>
<script>$("p").before("<b>Hello</b>");</script>

</body>
</html>

미리보기

 

예 제  
모든 p 태그 앞에 DOM element를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p> is what I said...</p>
<script>$("p").before( document.createTextNode("Hello") );</script>

</body>
</html>

미리보기

 

예 제  
모든 p 태그 앞에 jQuery object (또는 DOM Elements 배열)를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p> is what I said...</p><b>Hello</b>
<script>$("p").before( $("b") );</script>

</body>
</html>

미리보기

 

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.