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

.append()

.append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다.

문법

.append( content [, 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>
      body {
        line-height: 2;
        font-family: sans-serif;
        font-size: 20px;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'ul' ).append( '<li>Dolor</li>' );
      } );
    </script>
  </head>
  <body>
    <ul>
      <li>Lorem</li>
      <li>Ipsum</li>
    </ul>
  </body>
</html>

예제 2

strong 요소를 p 요소의 내용의 끝으로 이동시킵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      body {
        line-height: 2;
        font-family: sans-serif;
        font-size: 20px;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'p' ).append( $( 'strong' ) );
      } );
    </script>
  </head>
  <body>
    <p>abc</p>
    <strong>XYZ</strong>
  </body>
</html>

참고

Related Posts

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 / Method / .prop() - 속성값을 가져오거나 추가하는 메서드

jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드

.prop() .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다. 문법 1 .prop( propertyName ) 속성값을 가져옵니다. 문법 2 .prop( propertyName, value ) 속성값을 추가합니다. 예제 1 a 요소의 href 속성값을 .attr()과 .prop()로 가져와서 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...

jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

.addBack() .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( ) 예를 들어 $( 'ul' ).find( 'li' ).addBack() 은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

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

jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

.click() .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. 문법 .click( handler ) 예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. $( 'button' ).click( function() { // function } ); 예제 문단을 클릭하면 테두리가 생깁니다. 다시 클릭하면 테두리가 사라집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인

jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인

컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다. 유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 제목이나 콘트롤 바, 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 단점을 ...

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains() :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문법 $( ':contains(text)' ) 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다. 예를 들어 $( 'p:contains("ab")' ) ab 문자열을 포함한 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script> ...

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

HTML 문서와 연결하기 CDN 이용하기 HTML 문서에 다음 코드를 추가합니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> 3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다. 다운로드 받아 연결하기 jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다. <script src="path/jquery-3.3.1.min.js"></script> path와 파일 이름은 적절히 변경합니다. jQuery 사용하기 다음은 ID가 jb인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...

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

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

.clone() .clone()은 선택한 요소를 복제합니다. 문법 .clone( ) 예를 들어 $( '.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> ...

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다. GitHub : https://github.com/jakobbossek/jquery.toc Download : https://github.com/jakobbossek/jquery.toc/archive/master.zip 기본 사용법 h 태그가 많은 HTML 문서를 만듭니다. 다음 코드를 추가하여 jQuery와 jquery.toc.js를 연결합니다. 보통 </head> 위나 </body> 위에 넣습니다. jquery.toc.js의 경로는 적절히 수정하세요. <script src="//code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/jquery.toc.js"></script> 다음 ...

jQuery 강좌