JQuery를 사용하면서 동적으로 내용을 수정하고 싶은 경우가 생긴다. 그럴 때 자주 사용되는 6가지 함수에 대해 알아보겠다.
.append(): 요소 내부의 뒤에서부터 내용을 채운다..prepend(): 요소 내부의 앞에서부터 내용을 채운다..remove(): 요소 자체를 지운다..empty(): 요소 내부를 비운다. 보통append나prepend하기 전에 사용..html(): 요소 내부를 비우고 태그를 실행한 내용을 채운다. 또는 태그 포함한 채로 내용을 가져올 수 있다..text(): 요소 내부를 비우고 태그 포함 있는 그대로 내용을 채운다. 또는 태그를 제외한 내용만 가져온다.
append
안녕하세요 뒤에 append로 안녕히가세요를 붙이는 코드이다.
See the Pen JQuery append by Mincheol Kim (@mclearning2) on CodePen.
prepend
안녕하세요 앞에 append로 안녕히가세요를 붙이는 코드이다.
See the Pen JQuery prepend by Mincheol Kim (@mclearning2) on CodePen.
html, text
둘다 요소 내부의 내용을 가져오거나 넣는 기능을 가지고 있지만 미묘하게 다르다.
- html: 태그를 포함해서 가져온다. 내용을 넣을 땐 html 태그가 포함된 경우, 이를 해석해서 넣는다.
- text: 태그를 제외하고 가져온다. 내용을 넣을 땐 있는 그대로 넣는다.
See the Pen JQuery html by Mincheol Kim (@mclearning2) on CodePen.
empty
요소의 내용을 지운다. 보통 append나 prepend 이전에 사용한다.
See the Pen JQuery Empty by Mincheol Kim (@mclearning2) on CodePen.
remove
요소 자체를 지운다. 그래서 그 뒤로 jquery로 읽어낼 수 없다.
See the Pen JQuery remove by Mincheol Kim (@mclearning2) on CodePen.
