jQuery添加html数据 jquery动态添加html标签

转载

码海无压 2023-07-15 19:33:09

文章标签 jQuery添加html数据 js javascript html HTML 文章分类 jQuery 前端开发

方式

给指定标签的中间插入标签

<script>
	var ul= '<span></span>'
	$(".maplist").append(ul);
</script>

技巧

企业开发中，标签都是很大一坨，建议养成换行的好习惯

方法一：直接用''将标签包住，然后用+来进行拼接

优势在于如果不用拼接多个var，并且换行习惯好的话，会比较直观

<script>
	//这里的data一般都是Ajax取回来的数据
	var mapPointerArr = data;
	var li ='<li class="mapli">' +
		'<div class="listdiv">' +
		'<span class="listImg"></span>' +
		'<span class="listarea">'+mapPointArr[i].name+'</span>' +
		'</div>';
		$("#giveThis").append(li);
</script>

方法二：使用$(‘’)把标签包住，用.append(),prepend和 after(),before()来进行拼接

优势在于逻辑性很强，对于ul li div这种包裹性的标签之间的嵌套关系很明确

<script>
var charact = $('<ul class="charact"></ul>');
var isGoodHouse = data[i].isGoodHouse;
isGoodHouse =  charact.append($('<i class="emIcon emIcon-good"></i>'));
charact.append($('<li class="em' +[j+1]+ ' ">' + houseTrait[j] + '</li>'));
$("#giveThis").append(charact);
</script>

jQuery中append(),prepend()与after(),before()的区别

在jQuery中，添加元素有append(),prepend和 after(),before()两种共四个。

根据字面意思我们可以看出他们分别是追加，添加和之前，之后，意思相近。同时他们又都有添加元素的作用，容易混淆。

要想搞清楚他们之间的区别。

首先我们要明白这几个函数各自的作用。

一.append()和prepend()的作用

append()用于在被选元素的结尾插入元素。

prepend()用于在被选元素的开头插入元素。

也就是说这两个函数的添加都是添加到元素的内部的。

看下面的HTML代码

<div id="test">
  <p>a</p>
</div>
<!--

使用 append( ) 和 prepend( )添加元素


-->

<script>
$(document).ready(function(){
    $("#test").append("<p>b</p>") //使用append()添加 b 段落
    $("#test").prepend("<p>c</p>") //使用 prepend()添加 c 段落
})
</script>

效果如下

<div id="test">
<p>c</p>
<p>a</p>
<p>b</p>
</div>

从上面可以得知，当我们使用 append() 和 prepend()往 id 为 test 的 div 块添加元素时，是添加到 div 内部的。

也就是说，我们添加的元素，成为了被添加元素的子元素。

二. after() 和 before() 的作用

after()用于在被选元素之后插入内容。

before()用于在被选元素之前插入内容。

这意味着这两个函数是往元素外部的前后添加的。

还是刚刚的HTML代码

<div id="test">
  <p>a</p>
</div>
 
<script>
//使用 after() 和 before()添加元素。
	$(document).ready(function(){
	    $("#test").after("<p>b</p>")
		$("#test").before("<p>c</p>")
	})
</script>

结果如下

<p>c</p>
<div id="test">
<p>a</p>
</div>
<p>b</p>

从结果可知，after( ) 和 before( ) 往 id=”test“ 的 div块添加元素时，是添加到块外部的。

也就是说，添加的元素，成为了被添加元素的兄弟元素。