jq动态拼接标签的两种方法及其注意事项

来源：互联网发布：开源cms系统 php 编辑：程序博客网时间：2024/06/08 08:21

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>

0 0