반응형
jQueyr DOM의 변경(DOM Manipulation)
DOM 구조를 변경할 수 있는 jQuery 메서드들이다. 동적으로 문서구조를 변경할 수 있고, 특정 노드의 내,외부 삽입과 삭제도 가능하다.
| 메소드 | 기능 |
| DOM Insertion, Inside | |
| append() | 선택 노드 내부의 맨 뒤에 자식 노드를 새로 추가한다. |
| appendTo(target) | 새로운 노드를 target에 해당하는 노드 내부의 마지막에 추가한다. |
| prepend() | 선택 노드 내부의 맨 앞에 자식 노드를 새로 추가한다. |
| prependTo(target) | 새로운 노드를 target에 해당하는 노드 내부의 첫 번째로 추가한다. |
| html() | 노드 내부의 HTML을 읽고 쓸 수 있다. |
| text() | 노드의 텍스트를 읽고 쓸 수 있다. |
| DOM Insertion, Outside | |
| after() | 선택된 노드 뒤에 새로운 노드를 추가한다.(형제관계) |
| before() | 선택된 노드 앞에 새로운 노드를 추가한다.(형제관계) |
| insertAfter(target) | 작성된 jQuery 객체를 타깃 뒤에 삽입한다.(형제관계) |
| insertBefore(target) | 작성된 jQuery 객체를 타깃 앞에 삽입한다.(형제관계) |
| DOM Insertion, Around | |
| wrap() | 선택된 집합을 각각의 매개 변수로 넘긴 HTML 구조로 감싼다. |
| wrapAll() | 선택된 집합의 전체 외곽을 매개 변수로 넘긴 HTML 구조로 감싼다. |
| wrapInner() | 선택된 집합의 내부에 매개 변수로 넘김 HTML 구조로 감싼다. |
| DOM Removal | |
| detach() | DOM에서 조건에 일치되는 노드들을 제거한다.(단, 메모리에는 남아 있기 때문에 다시 사용할 수 있다.) |
| empty() | DOM에서 조건과 일치하는 노드들의 자식 노드들을 제거한다. |
| remove() | DOM에서 조건과 일치하는 노드들을 제거한다. |
| unwrap() | wrap()의 반대로, 선택된 집합을 감싸고 있는 HTML을 제거한다. |
| DOM Replacement | |
| repalceAll() | 조건에 맞는 노드들을 target 노드들로 대체한다. |
| replaceWith() | 조건에 맞는 노드들을 매개 변수로 넘긴 새로운 HTML로 대체한다. |
| - | |
| clone() | 선택한 노드와 똑같은 노드를 복사한다. |
반응형
'개발 및 관리 > Javascript' 카테고리의 다른 글
| jQuery Quick API Reference (0) | 2023.02.01 |
|---|---|
| (읽어봐야 할) 나쁜 자바스크립트 작성 습관과 작별하기 (0) | 2022.12.27 |
| jQuery 필터링 : 선택된 집합에서 다시 조건에 맞는 jQuery 집합을 선택 (0) | 2022.10.23 |
| jQuery 트리 구조 탐색 (0) | 2022.10.23 |
| jQuery 폼 선택자 (0) | 2022.10.23 |
