[jQuery]Manipulation--html, text, val

[jQuery]html, text, val

 

語法:

  • 取得html內容:html()
  • 設定html內容:html('<p>Hello</p>')
  • 取得text內容:text()
  • 設定text內容:text('Hello')
  • 取得value內容:val()
  • 設定value內容:val('Hello')
  • Demo4-04.htm

範例:

<HTML>
<HEAD>
<script type="Text/JavaScript" src="js/jQuery.js"></script>
<script type="Text/JavaScript">
$(document).ready(function(){
	var div1=$('#div1');
	var txt1=$('#txt1');
	//取得html
	$('#btn1').click(function(){
		alert(div1.html());
	});
	
	//設定html
	$('#btn2').click(function(){
		div1.html('<b><i>我改了html</i></b>');
	});
	
	//取得val
	$('#btn3').click(function(){
		alert(txt1.val());
	});
	//設定val
	$('#btn4').click(function(){
		txt1.val('我修改了val');
	});
	
	//取得text
	$('#btn5').click(function(){
		alert(div1.text());
	});
	
	//設定text
	$('#btn6').click(function(){
		$('i',div1).text('我修改了text內容');
	});

})

</script>
<style>
	.d1{
		background-color:yellow;
		color:blue;
		font-size:18px;
	}
</style>
</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<input type="button" id="btn1" name="btn1" value="取得html"/><br>
<input type="button" id="btn2" name="btn2" value="設定html"><br>
<input type="button" id="btn3" name="btn3" value="取得val"><br>
<input type="button" id="btn4" name="btn4" value="設定val"><br>
<input type="button" id="btn5" name="btn5" value="取得text"><br>
<input type="button" id="btn6" name="btn6" value="設定text"><br>

<hr />
<input type="text" id="txt1" name="txt1" value="我是txt1"><br>
<div id="div1"><p>我是div1</p></div>
</FORM>
</BODY>
</HTML>

以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat