[JQ] html(), text() 비교와 응용하기

html() 참고자료

.html()

.html() | jQuery API Documentation

 

요소의 값 변경

<h2> head-0 </h2>
<h2> head-1 </h2>
<h2> head-2 </h2>

 

 

var tmpHtml = $('h2').html();
		alert(tmpHtml);

해당 요소 중 첫번째 요소의 값을 가져옴

 

해당 모든 대상의 값을 변경

$('h2').html(" 땅콩이 ");

 

값이 태그형태라면 태그를 적용 후 출력

$('div').html(" <h3>땅콩이</h3> ");

 

---

text() 참고자료

.text()

.text() | jQuery API Documentation

 

모든 해당요소의 값 가져옴

var tmpText = $('h2').text();
	alert(tmpText);

해당 모든 대상의 값을 변경

$('h2').text(" 땅콩2 ");

값이 태그형태라면 문자 그대로 출력

$('div').text(" <h3>땅콩이</h3> ");

---

응용

idx만큼 * 붙이기

$('h2').html(function(idx,oldHTML){
			//alert(idx+"/"+oldHTML);
			// 인덱스 값에 따른 * 출력
			var tmpStar = "";
			for(var i=0;i<idx;i++){
				tmpStar += " * ";
			}
			
			return oldHTML + tmpStar;
		});

div 출력되는 '땅콩' - 츄르, 버터, 잼

var addArray = ["츄르", "버터", "잼"];
$('div').html(function(idx, oldHTML) {
	return "<h3>땅콩이 - "+addArray[idx]+"</h3>";
});