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

最新推荐文章于 2022-08-14 14:19:44 发布

gebozhedao

最新推荐文章于 2022-08-14 14:19:44 发布

阅读量5.5k

点赞数

本文链接：https://blog.csdn.net/gebozhedao/article/details/71192282

版权

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>