html(), text(), val()

컴퓨터 프로그래밍/JQuery
html(), text(), val()

깝돌이 2020. 5. 28. 13:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html(), text(), val()</title>
<style type="text/css">
</style>

<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.버튼 클릭하면 버튼의 타이틀을(value값) resultView 영역에다가 출력
	//: append()와 html이()은 기능 적인 면에서 똑같습니다. html은 덮어쓰고, append는 뒤이어 붙입니다.
	//: html사용한 1-1같은 경우에는 클릭 할때 마다  overwrite하기 때문에 그때마다 새로운 것으로 그 영역을 덮어씁니다.
	//  그래서 클릭을 하지만 실행이 안되는 것 처럼 보입니다.
	//: append()를 이용하면 클릭 할때마다 계속적으로 실행이 됩니다. 
	//1-1 html:
	$('#creatBtn').click(function() {
		//$('#resultView').html($(this).val());
		//$('#resultView').append($(this).val()+'<P>');									 
		//text(), html()안됨!! val()을 써야(form tag 들은)합니다. 
	});//click
	//1-2 append를 
	$('#creatBtn').click(function() {
		$('#resultView').append($(this).val()+'<P>');//append랑 html이랑 똑같은 데, 덮어쓰는 거냐 붙이는 거냐에 따라 다름									 
	
	});//click
	//$(this)에서 this는 #creatBtn중에서 클린된 것을 의미합니다. 
	//이것은 form field이기 text(), html()아닌 val()함수를 통해서 값을 받아 오게 됩니다.  
	
	//2. html()을  이용해서 append() 동일한 결과로 출력되도록합니다.
	$('#creatBtn').click(function() {
		var result = $('#resultView').html();
			//resultView에 있는 내용을 변수에 저장합니다. 
		$('#resultView').html(result+$(this).val()+"<p>");
			//기존에 resultView에 있던 내용에 클릭된 creatBtn의 value 값을 받아와 더해줍니다.
			//이렇게 되면, append해주는 것과 같은 기능을 하게 됩니다. 
	});//click
});
</script>
</head>
<body>
	<input type="button" value="버튼 클릭시 동적으로 문자열 생성" id="creatBtn">
	<select id="creatSel">
		<option>Encore Academy 남부지구</option>
		<option>Encore Academy 서초지구</option>
		<option>Encore Academy 판교지구</option>
		<option>Encore Academy 가산디지털지구</option>
		<option>Encore Academy 삼성지구</option>
	</select>
	<div id="resultView"></div>
</body>
</html>