jQuery / Method / .insertBefore() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.insertBefore()는 특정 요소 앞에 요소를 추가 또는 이동한다.

문법

  • p 요소 앞에 <h1>Hello</h1>를 추가한다.
$( '<h1>Hello</h1>' ).insertBefore( 'p' );
  • p 요소 앞으로 h1 요소를 이동한다.
$( 'h1' ).insertBefore( 'p' );

예제 1

  • p 요소 앞에 <h1>Hello</h1>를 추가한다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      body {
        font-family: Consolas, monospace;
        font-size: 16px;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.7.1.js"></script>
    <script>
      $( document ).ready( function() {
        $( '<h1>Hello</h1>' ).insertBefore( 'p' );
      } );
    </script>
  </head>
  <body>
    <p>World</p>
  </body>
</html>
  • 반영된 후의 코드는 다음과 같다.
<h1>Hello</h1>
<p>World</p>

예제 2

  • p 요소 앞에 <h1>Hello</h1>를 추가한다.
  • p 요소가 여러 개 있어도 다 추가된다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      body {
        font-family: Consolas, monospace;
        font-size: 16px;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.7.1.js"></script>
    <script>
      $( document ).ready( function() {
        $( '<h1>Hello</h1>' ).insertBefore( 'p' );
      } );
    </script>
  </head>
  <body>
    <p>World</p>
    <p>World</p>
  </body>
</html>

예제 3

  • p 요소 앞으로 h1 요소를 이동한다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      body {
        font-family: Consolas, monospace;
        font-size: 16px;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.7.1.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'h1' ).insertBefore( 'p' );
      } );
    </script>
  </head>
  <body>
    <p>World</p>
    <h1>Hello</h1>
  </body>
</html>

참고

같은 카테고리의 다른 글
jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

.removeAttr() .removeAttr()은 선택한 요소의 특정 속성을 제거한다. 문법 attributeName 속성을 제거한다. .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거한다. $( 'h1' ).removeAttr( 'title' ); 예제 input 요소의 placeholder 속성을 제거한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> input { font-size: ...

jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드

jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드

.slideDown() .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

.wrapAll() .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 모든 p 요소를 모아서 div 태그로 감쌉니다. 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

:odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 다음은 홀수 인덱스인 p 요소를 선택한다. 주의할 점은 인덱스가 0부터 시작한다는 것이다. $( 'p:odd' ) 예제 인덱스가 홀수인 li 요소를 선택하고, 글자색을 빨간색으로 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킨다. 문법 .before( content ) 다음은 h1 요소 앞에 Hello를 내용으로 갖는 p 요소를 추가한다. $( 'h1' ).before( '<p>Hello</p>' ); 다음은 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 p 요소를 이동시킨다. $( 'h1.a' ).before( $( 'p.b' ) ); 예제 ...

jQuery / Method / .insertBefore() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

jQuery / Method / .insertBefore() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.insertBefore()는 특정 요소 앞에 요소를 추가 또는 이동한다. 문법 p 요소 앞에 <h1>Hello</h1>를 추가한다. $( '<h1>Hello</h1>' ).insertBefore( 'p' ); p 요소 앞으로 h1 요소를 이동한다. $( 'h1' ).insertBefore( 'p' ); 예제 1 p 요소 앞에 <h1>Hello</h1>를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기

jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기

<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '.check-all' ).click( function() { ...

jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

jQuery를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두 가지로 구분할 수 있습니다. 다른 라이브러리와 충돌 다른 버전의 jQuery와 충돌 각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다. 다른 라이브러리와 충돌 jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다. 이를 방지하는 방법은 ...

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

.fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다. 문법 .fadeIn( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...