jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

.clone()

.clone()은 선택한 요소를 복제합니다.

문법

.clone( [withDataAndEvents ] )

예를 들어

$( '.ab' ).clone().appendTo( 'h1' );

은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다.

예제

span 요소를 복제하여 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() {
        $( 'span' ).clone().appendTo( 'h1' );
      } );
    </script>
  </head>
  <body>
    <h1></h1>
    <p><span>Lorem ipsum dolor.</span></p>
  </body>
</html>

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

<h1><span>Lorem ipsum dolor.</span></h1>
<p><span>Lorem ipsum dolor.</span></p>

참고

Related Posts

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

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

jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 메서드

jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 메서드

.css() .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가합니다. 문법 1 .css( propertyName ) 속성값을 가져옵니다. 예를 들어 $( "h1" ).css( "color" ); 는 h1 요소의 스타일 중 color 속성의 값을 가져옵니다. 문법 2 .css( propertyName, value ) style 속성을 추가합니다. 예를 들어 $( "h1" ).css( "color", "green" ); 는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 바꿉니다. <h1 style="color: green;">...</h1> 예제 1 h1 ...

jQuery / 요소가 순서대로 나타나게 하는 방법

jQuery / 요소가 순서대로 나타나게 하는 방법

.animate()로 요소를 나타내기 다음과 같이 간단한 예제를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { box-sizing: border-box; margin: 0px; } .jb { height: 200px; padding: 20px; text-align: center; color: ...

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

.wrap() .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...

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

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

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

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } </style> </head> <body> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...

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

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

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

jQuery / .ajax() / 동기식으로 사용하는 방법

jQuery / .ajax() / 동기식으로 사용하는 방법

Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...

jQuery / Plugin / jQuery Smooth Scroll

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다. GitHub : https://github.com/kswedberg/jquery-smooth-scroll Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } p { margin-bottom: 800px; } </style> </head> <body> <ul> <li><a href="#ipsum">Ipsum</a></li> <li><a href="#dolor">Dolor</a></li> </ul> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, ...

jQuery 강좌