[jQuery]Manipulation--內部加入:append(),appendTo()

[jQuery]內部加入:append(),appendTo()

語法:

  • 在div中加入p
    • $('#div1').append('<p>')
  • 把p加入到div中
    • $('<p/>').appendTo($('#div1'))

範例:


<HTML>
<HEAD>
<script type="Text/JavaScript" src="js/jQuery.js"></script>
<script type="Text/JavaScript">
$(document).ready(function(){
	
	var tt=$('<a/>').attr('href','http://tw.yahoo.com').attr('target','_blank').text('yahoo');
	//使用append
	$('#btn1').click(function(){
		$('#div1').append(tt);
	});
	
	//使用appendTo
	$('#btn2').click(function(){
		tt.appendTo($('#div1'));
	});
	

})

</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="使用append"/><br>
<input type="button" id="btn2" name="btn2" value="使用appendTo"><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