728x90 300x250 SMALL javaScript/jQuery148 [jQuery] 요소 삭제 remove() remove() 특정 요소를 삭제 할 경우 remove() 메서드를 사용한다. $대상.remove() 클릭한 리스트 삭제하기 A B C D 버튼을 클릭하면 전체 자식 요소 삭제 리스트 삭제 A B C D 2023. 1. 28. [jQuery]요소 이동 append(), appendTo(), insertAfter(), after(), insertBefore(), before() 요소 이동 방법은 신규 요소 추가와 동일한 메서드를 사용한다. 기존에 있는요소를 사용하면 이동이 되고 없는요소를 사용하면 추가가 되는 차이다. 신규일 경우랑 동일하기 때문에 빠르고 정리하고 넘어가자 첫 번째 자식 노드로 이동 $부모요소.prepend($이동요소) $이동요소.prependTo($부모요소) html 리스트 추가 A B C D prepend() $("#btnAdd").click(function() { var $list =$(`E`); $(".list").prepend($list); }) .prependTo() $("#btnAdd").click(function() { var $list =$(`E`); $list.prependTo(".list"); }) 실행결과 마지막 자식 노드로 이동 $부모요소.. 2023. 1. 27. [jQuery]특정 노드 다음에 요소 추가 insertAfter() after() insertAfter() after() $추가요소.insertAfter($기준요소) $기준요소.after($추가요소) insertAfter() 리스트 추가 A B C D after() 리스트 추가 A B C D 실행결과 버튼을 클릭하면 on클래스를 기준으로 아래쪽 으로 li가 들어가게 된다. insertAfter()와 after()는 기준요소와 추가요소의 위치만 변경 되었을 뿐 같은 결과를 나타낸다. 2023. 1. 26. [jQuery]특정 노드 이전에 요소생성 insertBefore() before() insertBefore() before() $추가요소.insertBefore($기준요소) $기준요소.before($추가요소) insertBefore() 리스트 추가 A B C D before() 리스트 추가 A B C D 실행결과 버튼을 클릭하면 on클래스를 기준으로 위쪽으로 li가 들어가게 된다. insertBefore()와 before()는 기준요소와 추가요소의 위치만 변경 되었을 뿐 같은 결과를 나타낸다. 2023. 1. 25. 이전 1 ··· 21 22 23 24 25 26 27 ··· 37 다음 728x90 반응형 LIST