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>
