jquery의 html(), append(), prepend()를 이용해 html 추가하기

JQuery로 테그 안의 내용을 바꾸거나 추가할때 사용하는

html(), append(), prepend()가 있는대요.

각각의 사용법을 한번 정리해보겠습니다.

우선 HTML에 아래와 같은 Table을 만들어서 테스트 해볼까요~

(<tbody>를 id로 찾기위해 id를 mytbody로 설정했습니다.)

<table border="1" style="width:150px"> <tbody id="mytbody"> <tr> <td>티라노</td> </tr> <tr> <td>트리케라</td> </tr> </tbody> </table>

.html()

테그와 테그 사이의 html을 가져옵니다.

위에 테스트로 만들어준 <tbody>와 </tbody> 사이의 html 문자들을 가져오죠.

그럼 .html(htmlString)을 하게 되면?

그렇죠... 해당 Object의 태그 사이 html 내용을 htmlString 내용으로 바꿔버립니다.

$("#mytbody").html("<tr><td> * 브라키오</td></tr>") 이렇게 실행하면

기존에 있던 html내용들(2줄짜리)이 사라지고 새로운 브라키오가 한줄 나오게 됩니다.

일케 말이죠.

내용을 바꾸지 말고, 한출 추가할땐 어떻게 할까요?

.append("추가할내용") 하면 됩니다.

.append는 뒤에 추가하는 거에요.

$("#mytbody").append("<tr><td> * 브라키오</td></tr>")

이렇게 실행하면~

이렇게 뒤에 한줄 추가됩니다~

앞에 추가하고 싶으면??

.prepend("추가할내용") 하면 되죠~

$("#mytbody").prepend("<tr><td> * 브라키오</td></tr>")

실행결과는 아래와 같아요~

참 유용하죠?

html(), append(), prepend()를 이용해서 화면을 맘대로 가지고 놀 수 있게 됩니다~

예를 들면 selectbox의 onchange 이벤트 시 선택된 결과에 따라

html 내용을 다르게 보여주고 싶은 경우나~

선택한 값들을 선택목록에 append하거나~

Ajax를 통해 받아온 Json 값에 따라서 결과 HTML을 생성해서 보여준다거나~

무궁무진 하죠??

오늘은 요까지~

[출처] jquery의 html(), append(), prepend()를 이용해 html 추가하기|작성자 수신제가