반응형
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 |