.appendTo()

1 개요
2 문법
3 예제

개요

.appendTo()는 선택한 요소를 다른 요소의 종료 태그 앞으로 이동시킵니다.

문법

.appendTo( target )

예제

abc를 클래스 값으로 가지는 span 요소를 h1 요소의 </h1> 앞으로 이동시킵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      body {
        font-family: Consolas, monospace;
        font-size: 16px;
      }
      .abc {
        color: red;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.7.1.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'span.abc' ).appendTo( 'h1' );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem Ipsum Dolor</h1>
    <span class="abc">Consectetur elit.</span>
    <p>Aenean nec mollis nulla.</p>
  </body>
</html>

렌더링 결과는 다음과 같습니다.

<h1>Lorem Ipsum Dolor<span class="abc">Consectetur adipiscing elit.</span></h1>
<p>Aenean nec mollis nulla.</p>

jQuery / Reference / .wrapAll()

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

jQuery / Reference / .appendTo()

개요 .appendTo()는 선택한 요소를 다른 요소의 종료 태그 앞으로 이동시킵니다. 문법 .appendTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 </h1> 앞으로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...

jQuery / Reference / .after()

개요 .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .after( content ) 예제 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> ...

jQuery / Reference / .insertBefore()

개요 .insertBefore()는 특정 요소 앞에 요소를 추가하거나 이동시킵니다. 문법 .insertBefore( target ) 예제 1 p 요소 앞에 <h1>Hello</h1>를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; ...

jQuery / Reference / .has()

개요 .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 다음은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. $( 'h1' ).has( 'span' ) 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script ...

jQuery / Reference / .insertAfter()

개요 .insertAfter()는 특정 요소 뒤에 요소를 추가하거나 이동시킵니다. 문법 .insertAfter( target ) 예제 1 h1 요소 뒤에 <p>World</p>를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; ...

jQuery / Reference / .empty()

개요 .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 문법 .empty() 예를 들어 다음과 같은 h1 요소가 있을 때 <h1>Lorem</h1> 다음과 같이 하면 $( 'h1' ).empty() 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Reference / .removeAttr()

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

jQuery / Reference / .prependTo()

개요 .prependTo()는 선택한 요소를 다른 요소의 시작 태그 뒤로 이동시킵니다. 문법 .prependTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 <h1> 뒤로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...

jQuery / Reference / .addClass()

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