jq動態拼接標籤的兩種方法及其注意事項
<body>
<div id="d1">
測試動態生成標籤
</div>
<br />
<div id="d2">
動態生成標籤的位置
</div>
<div id="d3">
<input type="button" value="生成a標籤" id="btn" />
</div>
</body>
<script>
$(function(){
$('#btn').bind('click', function() {
//正確方法1： 在標籤中直接完整拼出所有屬性和標籤體中的文本
$("<li class='c1'>Hello</li>").appendTo("#d2");
//目標結果：<li class="c1">Hello</li>
//錯誤方法1： 完整拼時，標籤體中的文本只能在標籤體中（及> < 中間）拼好，不能用 text:"標籤體文本" 這種方式
$("<li class='c1' text='嘿嘿'></li>").appendTo("#d2");///這樣不行，text這樣拼只當做普通自定義屬性，標籤體中顯示不出來 “嘿嘿”
//目標結果：<li class="c1" text="嘿嘿"></li>
//正確方法2：可以用這種方式來拼接要 注意：選擇器寫法中第一個參數只寫標籤的開始標籤即可。第二個參數{}中是目標標籤的屬性，其中可以用 text："標籤體文本" 的形式
$("<li >",{class : "c1",text : "嘿嘿嘿"}).appendTo("#d2");//顯示 嘿嘿嘿 這樣拼是正確的
//目標結果：<li class="c1">嘿嘿嘿</li>
//錯誤方法2：這種方式不行，達不到拼接{}中屬性的目的，要用{}這個，第一個參數就不能寫完整標籤
$("<li >Hello2</li>",{class : "c1",text : "嘿嘿"}).appendTo("#d2");//這樣寫不行，只有標籤顯示hello，沒有屬性
//目標結果：<li>Hello2</li>
});
})
</script>