[jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기

쉽게 생각하면 스크립트 상에서 문자열로 만든 html 태그를 현재 보여진 화면에서 출력을 시켜주는 것이다.

동적으로 태그를 추가해주려면 해당 태그내에 html 태그를 모두 갈아 엎어주거나 

지정 태그 기준으로부터 삽입할 위치를 지정해주는것을 해보기로 하겠다.

지정태그내에 존재하는 html 태그를 새로 지정한 html태그로 엎어버리고자 할때는

$(지정타겟).html(HTML태그문자열)

지정태그내에 존재하지 마지막 태그다음에 태그문자열을 삽입하는 방법은

$(지정타겟).append(HTML태그문자열)

지정태그바로 다음에 태그문자열을 붙이는 방법은

$(지정타겟).after(HTML태그문자열)

지정태그바로 이전에 태그문자열을 붙이는 방법은

$(지정타겟).before(HTML태그문자열)

와 같이 주면 될것이다. 

그리고 예를들어서 화면에 HTML태그를 문자로 보여주고 싶을 경우!

$(지정타겟).text(HTML태그문자열) 처럼 text함수를 이용하면 태그가 아닌 문자로 화면에 출력이 가능하다

태그 화면을 보여주는 함수 : html / append / before / after

태그UI화면이 아닌 문자열로 화면을 보여주는 함수 : text

샘플로 태그 화면 보여주는 함수중에는 html을 써보고 문자열로보여주는 text 함수로만 샘플링을 구현해보았다. 해당 소스를 응용하여 html/append/before/after/text 에대하여 이해하도록 해보자.

스크립트 소스부분

$(function(){
		var tag = "<input type="checkbox"><br />변경후HTML";
		//html함수 적용하여 htmltest태그내의 html 변경
		$("#htmlbutton").click(function(){
			$("#htmltest").html(tag);
		});
		//text함수를 적용하여 html함수를 사용했던 같은 내용의 문자열을 표출해본다.
		$("#textbutton").click(function(){
			$("#texttest").text(tag);	
		})
})

HTML 소스부분

<div id="htmltest" style="border-width: 1px; border-style: solid;">
	<input type="text" value="test"/>
	<br/>
	변경전HTML
	<br/>
</div>
<br/>
<div id="texttest"  style="border-width: 1px; border-style: solid;"></div>
<input type="button" value="html 태그변경" id="htmlbutton"/>
<input type="button" value="태그를 text로 출력" id="textbutton"/>

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!