jQuery를 이용한 innerHTML

웹개발을 하다 보면 동적으로 태그들을 집어넣어야 하는 상황이 온다.

그런데, 그냥 페이지야 document.innerHTML로 하면 되지만, 이게 표준도 아닌데다가(앞으로 쓸일이 거의 없지 않을까?)

프레임웍이 이것저것 덕지덕지 붙어있다 보면, 사용하기 힘든 경우가 있다.

특히나, jQuery가 붙어 있는 경우에는 대체할 수 있는 훌륭한 것이 있다.

.html()

.append()

이 두가지다. 

두가지 다 ()안에 값을 넣으면 set이되고 ()만 쓰면 get이 된다.

예를들어

$(".test").html() 이라고 하면 css class="test"인 태그의 내부 html을 보여준다.

마찬가지로

$(".test").html("<p>test</p>") 라고 하면 css class="test"인 태그의 내부에 "<p>test</p>"를 넣어준다.

이것은 동적으로 태그값을 바꿔줄 때 유용하다.

역시 jQuery이므로

$(".class") 대신에 $("#id")로 사용할 수 있다.

html()과 append()의 차이점은 

html()은 권장하지 않지만, 값을 부를 수 있고, html("html값")을 하면 html값만 들어간다.

반면, append()는 append("html값")을 하면 원래코드 뒤에 "html값"이 추가되는 차이가 있다.

<jsp:include>를 사용해서 불러들인 태그에도 적용할 수 있으므로

당연히 sitemesh에서도 사용이 된다.