[ JavaScript ] 자바스크립트 기본 문법 | jQuery 노드 변경 API(before,after,prepend,append,remove,empty...)

2021. 2. 8. 19:20·Archive/Develop
목차
  1. 자바스크립트 기본 문법  ::  jQuery 노드 변경 API
728x90
반응형

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 


 

 

 

 

자바스크립트 기본 문법  ::  jQuery 노드 변경 API

 

 

 

 

 

jQuery를 이용해서 노드를 제어하는 방법을 알아봅시다.

 

 

jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있습니다.

 

 

 

아래 링크는 jquery api manipulation 관련 링크입니다.

 

 

 

 

http://api.jquery.com/category/manipulation/

 

Manipulation | jQuery API Documentation

Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of

api.jquery.com

 

 

 

 

추가

 

 

추가와 관련된 주요한 메소드는 4가지입니다.

 

 

각각의 관계를 그림으로 나타내면 아래와 같습니다.

 

 

 

 

 

div 태그가 있다면, 그 div 태그 밖에 형제 관계로 추가되는 것이 before 와 after 이고,

 

prepend 와 append 는 하위로 추가됩니다.

 

 

 

아래 코드는 위의 API를 이용해서 문서의 구조를 변경한 예시 입니다. 

 

 

 

<div class="target">
    content1
</div>
 
<div class="target">
    content2
</div>
 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('.target').before('<div>before</div>');
    $('.target').after('<div>after</div>');
    $('.target').prepend('<div>prepend</div>');
    $('.target').append('<div>append</div>');
</script>

 

 

위 코드를 실행한 결과는 아래와 같습니다.

 

 

 

 

 

 

 

 

 

제거

 

제거와 관련된 API는 remove와 empty가 있습니다.

 

remove는 선택된 엘리먼트를 제거하는 것이고,

 

empty는 선택된 엘리먼트의 텍스트 노드를 제거하는 것입니다.

 

 

 

예시로 살펴보도록 하겠습니다.

 

 

 

<div class="target" id="target1">
    target 1
</div>
 
<div class="target" id="target2">
    target 2
</div>
 
<input type="button" value="remove target 1" id="btn1" />
<input type="button" value="empty target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#btn1').click(function(){
        $('#target1').remove();
    })
    $('#btn2').click(function(){
        $('#target2').empty();
    })
</script>

 

 

 

아래 그림은 첫번째 버튼(#btn1) 을 눌렀을 때의 html 결과입니다.

 

 

 

 

 

 

target1 이라는 id 를 가진 div 태그 자체가 사라진 것을 알 수 있습니다.

 

 

btn2 를 눌러보도록 하겠습니다.

 

 

 

 

 

 

빨간색 사각형을 보면, div 태그안에 텍스트가 사라진 것을 볼 수 있습니다.

 

 

 

 

 

바꾸기

 

 

 

replaceAll과 replaceWith는 모두 노드의 내용을 교체하는 API입니다.

 

replaceWith가 제어 대상을 먼저 지정하는 것에 반해서 replaceAll은 제어 대상을 인자로 전달합니다.

 

 

 

 

<div class="target" id="target1">
    target 1
</div>
 
<div class="target" id="target2">
    target 2
</div>
 
<input type="button" value="replaceAll target 1" id="btn1" />
<input type="button" value="replaceWith target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#btn1').click(function(){
        $('<div>replaceAll</div>').replaceAll('#target1');
    })
    $('#btn2').click(function(){
        $('#target2').replaceWith('<div>replaceWith</div>');
    })
</script>

 

 

 

 

replaceAll 은 바꿀 내용이 우선적으로 오고, 바뀔 대상이 뒤에 옵니다.

 

replaceWith 은 바뀔 대상이 앞에, 바꿀 내용이 뒤에 옵니다.

 

 

 

 

 

 

복사

 

 

노드를 복사하는 방법을 알아봅시다.

 

 

clone 을 이용하면 됩니다.

 

 

 

<div class="target" id="target1">
    target 1
</div>
 
<div class="target" id="target2">
    target 2
</div>
 
<div id="source">source</div>
 
<input type="button" value="clone replaceAll target 1" id="btn1" />
<input type="button" value="clone replaceWith target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#btn1').click(function(){
        $('#source').clone().replaceAll('#target1');
    })
    $('#btn2').click(function(){
        $('#target2').replaceWith($('#source').clone());
    })
</script>

 

 

 

clone 을 이용해서 복사하고, 복사한 내용을 replaceAll 과 replaceWith 을 통해

원래의 요소와 바꾼 코드입니다.

 

 

 

 

실행하면 다음 그림과 같습니다.

 

 

 

 

 

 

 

이동

 

 

dom manipulation API의 인자로 특정 노드를 선택하면 이동의 효과가 납니다.

 

 

 

<div class="target" id="target1">
    target 1
</div>
 
<div id="source">source</div>
 
<input type="button" value="append source to target 1" id="btn1" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#btn1').click(function(){
        $('#target1').append($('#source'));
    })
</script>

 

 

 

 

 

 

버튼을 누르면 sourece 가 target1 안으로 append 된 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

728x90
반응형

'Archive > Develop' 카테고리의 다른 글

[ JavaScript ] 자바스크립트 기본 문법 | Document 객체  (0) 2021.02.08
[ JavaScript ] 자바스크립트 기본 문법 | 문자열로 노드제어(innerHTML, outerHTML,innerText, outerText)  (0) 2021.02.08
[ JavaScript ] 자바스크립트 기본 문법 | 노드 변경 API(appendChild, createElement, createTextNode, removeChild, replaceChild)  (0) 2021.02.08
[ JavaSript ] 자바스크립트 기본 문법 | 노드 종류 API(nodeType, nodeName)  (0) 2021.02.08
[ JavaScript ] 자바스크립트 기본 문법 | Node 객체(childNodes, firstChild, lastChild, nextSibling...)  (0) 2021.02.08
  1. 자바스크립트 기본 문법  ::  jQuery 노드 변경 API
'Archive/Develop' 카테고리의 다른 글
  • [ JavaScript ] 자바스크립트 기본 문법 | Document 객체
  • [ JavaScript ] 자바스크립트 기본 문법 | 문자열로 노드제어(innerHTML, outerHTML,innerText, outerText)
  • [ JavaScript ] 자바스크립트 기본 문법 | 노드 변경 API(appendChild, createElement, createTextNode, removeChild, replaceChild)
  • [ JavaSript ] 자바스크립트 기본 문법 | 노드 종류 API(nodeType, nodeName)
코뮤(commu)
코뮤(commu)
코딩으로 커뮤니케이션하는 코뮤입니다 😎
  • 코뮤(commu)
    코뮤(COMMU)
    코뮤(commu)
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Archive
        • Hacking
        • Develop
        • ETC
      • Algorithm
      • DB&Infra
      • ETC
      • Node
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • IT지식보따리
    • IT가 맛있다
    • IT 천재
  • 공지사항

    • 배고픕니다
  • 인기 글

  • 태그

    Git
    Oracle
    백준 파이썬
    코드업 기초
    파이썬
    Django
    파이썬 백준
    javascript
    Python
    파이썬 문제
    백준
    Codeup
    비박스
    코드업 파이썬 기초 100제
    자바스크립트
    C++
    장고
    오라클
    oracle db
    코드업
    자바스크립트 객체
    카카오 100일 프로젝트
    docker
    파이썬 기초
    파이썬 알고리즘
    백준 풀이
    자바스크립트 API
    백준 문제풀이
    파이썬 기초 문제
    보안뉴스
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
코뮤(commu)
[ JavaScript ] 자바스크립트 기본 문법 | jQuery 노드 변경 API(before,after,prepend,append,remove,empty...)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.