반응형
Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- JavaScript
- dunk high
- 나이키
- Nike
- 오라클
- 주식공부
- Python
- 리눅스
- 덩크로우
- 발매예정
- 덩크 하이
- stockx.com
- sacai
- dunklow
- oracle
- 주식
- react
- 덩크 로우
- 파이썬
- 리액트
- Linux
- 제이쿼리
- Dunk Low
- 자바스크립트
- GIT
- Github
- 코로나19
- draw
- jQuery
- 드로우
Archives
- Today
- Total
Life goes slowly...
[jQuery] 제이쿼리 요소의 조작 (추가, 복사 및 삭제) 본문
728x90
반응형
Method |
설명 |
.append() |
선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가 |
.appendTo() |
선택된 요소를 해당 요소의 마지막에 추가 |
.prepend() |
선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가 |
.prependTo() |
선택된 요소를 해당 요소의 첫번째에 추가 |
.after() |
선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가 |
.insertAfter() |
선택한 요소를 해당 요소의 뒤쪽에 추가 |
.before() |
선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가 |
.insertBefore() |
선택한 요소를 해당 요소의 앞쪽에 추가 |
.clone() |
선택한 요소를 복사( 특정 태그안의 내용 모두 복사) |
.remove() |
선택한 요소를 삭제( 태그 안의 내용을 모두 삭제) |
.append() , .appendTo()
//부모.append(자식) 또는 자식.appendTo(부모)
.append( content [, content ] )
.appendTo( target )
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$( ".inner" ).append( "<p>Test</p>" );
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
.prepend(), .prependTo()
//부모.prepend(자식) 또는 자식.prependTo(부모)
.prepend( content [, content ] )
.prependTo( target )
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$( ".inner" ).prepend( "<p>Test</p>" );
<h2>Greetings</h2>
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>
.after(), .insertAfter()
//부모.after(자식) 또는 자식.insertAfter(부모)
.after( content [, content ] )
.insertAfter( target )
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$( ".inner" ).after( "<p>Test</p>" );
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>
</div>
.before(), .insertBefore()
//부모.before(자식) 또는 자식.insertBefore(부모)
.before( content [, content ] )
.insertBefore( target )
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$( ".inner" ).before( "<p>Test</p>" );
<div class="container">
<h2>Greetings</h2>
<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
</div>
.clone()
.clone( [withDataAndEvents ] )
.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$( ".hello" ).appendTo( ".goodbye" );
<div class="container">
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
.remove()
.remove( [selector ] )
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$( ".hello" ).remove();
<div class="container">
<div class="goodbye">Goodbye</div>
</div>
728x90
반응형
'프로그래밍 > Javascript' 카테고리의 다른 글
[jQuery] 자바스크립트 이벤트 등록 함수 - bind(), on(), live() 함수 (0) | 2020.11.01 |
---|---|
[jQuery] 속성값 제거하기 - .removeAttr() (0) | 2020.10.29 |
[jQuery] 속성 값 가져오거나 제어하기 - .attr() (0) | 2020.10.29 |
[jQuery] 제이쿼리 요소의 좌표, 위치 조작하기 (0) | 2020.10.28 |
[JS] 자바스크립트 페이지 이동함수 - location.href / location.replace/ location.assign (0) | 2020.10.11 |
[JS] 자바스크립트 대화상자창 - Alert, Confirm, Prompt (0) | 2020.10.11 |
[Js] 자바스크립트의 유효범위 - Hoisting(호이스팅) (0) | 2020.10.08 |
[Js] 자바스크립트의 클로저( Closure) (0) | 2020.10.08 |
Comments