วันจันทร์ที่ 24 มกราคม พ.ศ. 2554

jquery append and appendTo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>append and appendTo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//<![CDATA[
$(function(){
$('#button1').click(function(){
//method 1, append
var new_data = '<div>'+$('#data').val()+'</div>';
var container_el = $('#container').append(new_data);
alert(container_el.attr('id'));
});
$('#button2').click(function(){
//method 2, appendTo
var new_data = '<div class="t">'+$('#data').val()+'</div>';
var new_data_el = $(new_data).appendTo('#container');
alert(new_data_el.attr('class'));
});
});
//]]>
</script>
</head>

<body>

<div id="container">
<div id="a">#</div>
<div id="b">#</div>
<div id="c">#</div>
<div id="d">#</div>
<div id="e">#</div>
</div>


<input type="text" id="data" value="test"/>
<button id="button1">button1 append</button>
<button id="button2">button2 appendTo</button>

</body>
</html>

ไม่มีความคิดเห็น:

แสดงความคิดเห็น