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

개요

.after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다.

문법

  • 문법은 다음과 같다.
.after( content [, content ] )
  • 예를 들어 다음은 h1 요소 뒤에 Hello를 내용으로 갖는 p 요소를 추가한다.
$( 'h1' ).after( '<p>Hello</p>' );
  • 다음은 클래스 값으로 a를 갖는 h1 요소 뒤에 클래스 값으로 b를 갖는 p 요소를 이동시킨다.
$( 'h1.a' ).after( $( 'p.b' ) );

예제 1

  • h1 요소 뒤에 Hello World!를 내용으로 갖는 p 요소를 추가한다.
<!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() {
        $( 'h1' ).after( '<p>Hello World!</p>' );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
  </body>
</html>

예제 2

  • h1 요소 앞에 있던 p 요소를 h1 요소 뒤로 이동시킨다.
<!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() {
        $( 'h1' ).after( $( 'p' ) );
      } );
    </script>
  </head>
  <body>
    <p>Goodbye World!</p>
    <h1>Lorem ipsum dolor.</h1>
  </body>
</html>

참고

  • 선택한 요소 앞에 요소를 추가하거나 이동시키는 것은 .before()로 한다.
같은 카테고리의 다른 글
jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .append() - 선택한 요소의 내용의 끝에 콘텐트를 추가하는 메서드

jQuery / Method / .append() - 선택한 요소의 내용의 끝에 콘텐트를 추가하는 메서드

.append() .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).append( ' 123' ); 라고 하면 <p>Lorem Ipsum Dolor 123</p> 으로 출력됩니다. 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

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 / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

.offset() .offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다. 문법 1 .offset() 선택한 요소의 좌표를 가져옵니다. 예를 들어 var jb = $( 'h1' ).offset(); 는 h1 요소의 좌표를 변수 jb에 저장합니다. 문법 2 .offset( coordinates ) 선택한 요소를 특정 위치로 이동시킵니다. 예를 들어 $( 'h1' ).offset( { left: 100, top: 50 } ); 은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 ...

jQuery / Method / .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드

jQuery / Method / .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드

.width() .width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다. 문법 1 .width() 선택한 요소의 가로 크기를 반환합니다. 예를 들어 var jbVar = $( 'p' ).width(); 는 p 요소의 가로 크기를 변수 jbVar에 저장합니다. 문법 2 .width( value ) 선택한 요소의 가로 크기를 변경합니다. 예를 들어 $( 'h1' ).width( '100px' ); 는 h1 요소의 가로 크기를 100px로 만듭니다. 예제 1 선택한 요소의 가로 ...

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

.toggleClass() .toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / HTML 태그 바꾸기

jQuery / HTML 태그 바꾸기

예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); h2 요소를 선택하고 내용으로 들어간 후 h2 태그를 없애고 p 태그로 감싼다. 새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다. $( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

.resize() .resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다. 문법 $( window ).resize( function() { // do somthing ​} ); 예제 웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.text() .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다. 문법 1 .text() 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var jb = $( 'h1' ).text(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .text( textString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...

jQuery / Method / .children() - 어떤 요소의 자식 요소를 선택하는 메서드

jQuery / Method / .children() - 어떤 요소의 자식 요소를 선택하는 메서드

.children() .children()은 어떤 요소의 자식 요소를 선택합니다. 문법 .children( ) 예를 들어 $( 'div' ).children().css( 'color', 'blue' ); 는 div 요소의 자식 요소의 색을 파란색으로 만듭니다. $( 'div' ).children( 'p.bl' ).css( 'color', 'blue' ); 는 div 요소의 자식 요소 중 클래스 값으로 bl을 가진 p 요소의 색을 파란색으로 만듭니다. 예제 ul 요소의 자식 요소 중 ip를 클래스 값으로 가지는 ...