[jQuery] html()을 이용하여 태그 삽입(추가)하기

우리는 종종 웹 페이지 안에서 동적으로 처리가 되어야 하는 부분을 스크립트로 구성하곤 하는데, 오늘 설명하는 html() 메소드도 웹 페이지를 동적으로 제어할 수 있는 메소드중에 하나 이다.

간단하게 설명하면 html()은 사용자가 버튼을 클릭했을때 특정 위치(div) 안에 테이블을 생성한다던지, 또는 어떠한 특정 위치에 html 태그를 추가하는 기능을 한다.

자바스크립트에서 사용되는 innerHTML() 메소드와 동일한 기능이라고 이해하면 쉽다.

// ID가 test_1인 하위객체의 태그를 가져온다.
var getTag = $("#test_1").html() ;

alertg(getTag) ;



// 추가할 태그
var insTag = "<div id='innerDiv'>테스트</div>"

// dom Id가 test인 항목 하단에 tag 를 삽입한다.
$("#test_2").html(insTag) ;



// 함수를 작성하여 html을 추가할 수도 있다.
$("#test_2").html(function(){
	var gg = "<p>" + $("p").length + "</p>" ;
	return "<div>Good " + gg + "</div>" ;
}) ;

덧) text() 메소드와는 차이가 있으니 구분하자.