jQueyr DOM의 변경(DOM Manipulation)

개발 및 관리/Javascript 2022. 10. 24. 08:09 posted by HighLighter
반응형

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() 선택한 노드와 똑같은 노드를 복사한다.
 
반응형