jQuery 강좌 | Methods > .after()

.after()는 선택한 요소 뒤에 새 요소를 추가합니다.

문법

.after( content [, content ] )

예제

http://book.cmsfactory.net/jQuery/V01/Methods/after.html

h1 요소 뒤에 p 요소를 추가하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Method | .after()</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'h1' ).after( '<p>Hello World!</p>' );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
  </body>
</html>

추가하는 요소에 클래스를 넣거나

$( 'h1' ).after( '<p class="abc">Hello World!</p>' );

직접 스타일을 추가하는 것도

$( 'h1' ).after( '<p style="color: red;">Hello World!</p>' );

가능합니다.

참고로, 선택한 요소 앞에 컨텐트를 추가할 때는 .before()를 사용합니다.

Category

Created on 2014-02-24 12:50 | Updated on 2015-07-17 01:01

이 글을 공유하기

Kakao

기초 강좌