46일차 - [JQ] HTML(add, remove)

안녕하세요. pitang입니다.

jQuery HTML의 Add와 Remove를 알아보겠습니다.

 

jQuery - HTML(Add)

HTML content를 추가하는 메서드 네 가지가 있다.

 

append() - 선택한 요소의 끝에 내용 삽입 

prepend() - 선택한 요소의 시작 부분에 내용 삽입

after() - 선택한 요소 뒤에 내용 삽입

before() - 선택한 요소 앞에 내용 삽입

 

예시를 살펴보면 더욱이 이해가 갈 것이다.

 

append()

ex1) 

45html-append.html

console

 

ex2) 

46html-append.html

console

 

ex3) 

47html-append.html

console

---

prepend()

ex1)

48html-prepend.html

console

 

ex2)

49html-prepend.html

console

---

after()

ex1)

50html-after.html

console

after - append - li.after

-> after, append, li.after 버튼을 클릭한 순으로 이미지가 나열되어 있다.

 

jQuery - HTML(remove)

HTML elements, content를 삭제하는 메서드 두 가지가 있다.

 

empty() - 선택한 요소에서 하위 요소를 제거

remove() - 선택한 요소(및 하위 요소) 제거

 

예시를 살펴보면 더욱이 이해가 갈 것이다.

 

empty()

ex1)

51html-empty.html

console

-> 가운데 세개의 div element를 삭제해보았다.

---

remove()

ex1)

52html-remove.html

console

-> 가운데 세개의 div element를 삭제해보았다.

 

ex2)

53html-remove.html

console

 

 

 

 

 

 

 

감사합니다. 

 

*m1 맥북을 사용 중입니다.*