jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다.
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.
append
콘텐츠를 선택자 내부의 끝에 삽입한다.
구문의 차이만 빼고는 appendTo와 동일한 작업을 수행한다.
// HTML
<div id="wrap">
<div>내용</div>
</div>
// jQuery
$('#wrap').append('<div>새로운내용</div>');
// 출력
<div id="wrap">
<div>내용</div>
<div>새로운내용</div>
</div>
appendTo
콘텐츠를 선택자 내부의 끝에 삽입한다.
구문의 차이만 빼고는 append와 동일한 작업을 수행한다.
// HTML
<div id="wrap">
<div>내용</div>
</div>
// jQuery
$('<div>새로운내용</div>').appendTo('#wrap');
// 출력
<div id="wrap">
<div>내용</div>
<div>새로운내용</div>
</div>
prepend
콘텐츠를 선택자 내부의 앞에 삽입한다.
구문의 차이만 빼고는 prependTo와 동일한 작업을 수행한다.
// HTML
<div id="wrap">
<div>내용</div>
</div>
// jQuery
$('#wrap').prepend('<div>새로운내용</div>');
// 출력
<div id="wrap">
<div>새로운내용</div>
<div>내용</div>
</div>
prependTo
콘텐츠를 선택자 내부의 앞에 삽입한다.
구문의 차이만 빼고는 prepend와 동일한 작업을 수행한다.
// HTML
<div id="wrap">
<div>내용</div>
</div>
// jQuery
$('<div>새로운내용</div>').prependTo('#wrap');
// 출력
<div id="wrap">
<div>새로운내용</div>
<div>내용</div>
</div>
'Javascript' 카테고리의 다른 글
[jQuery기초] 요소조작_이벤트_animate_show&hide_css (0) | 2020.06.30 |
---|---|
[jQuery기초] 요소조작_이벤트_width_innerWidth_height_innerHeight (0) | 2020.06.30 |
[jQuery기초] 요소조작_이벤트_data, removeData, attr, removeAttr, prop, removeProp (0) | 2020.06.26 |
[jQuery기초] 요소조작_이벤트_before, insertBefore, after, insertAfter (0) | 2020.06.26 |
[jQuery기초] 요소조작_이벤트_html_text_empty_remove (0) | 2020.06.26 |
[jQuery기초] 요소조작_이벤트_mouseenter, mouseover, mouseleave, mouseout, mousemove (0) | 2020.06.25 |
[jQuery기초] 요소조작_이벤트_on_one_off_trigger_focus_click_hover (0) | 2020.06.25 |
[jQuery기초] 요소조작_CLASS (0) | 2020.06.25 |