JQuery的append(),appendTo(),prepend(),prependTo()用法

最新推荐文章于 2022-05-12 22:22:36 发布

Amazing_deron

最新推荐文章于 2022-05-12 22:22:36 发布

阅读量1.6k

点赞数 1

分类专栏：前端知识文章标签： append()

本文链接：https://blog.csdn.net/Deronn/article/details/86238369

版权

前端知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前端页面在通过ajax加载数据的时候，通常会通过返回的数据重新加载一个页面的数据或者表格，可以通过

js先清空一个table的数据，然后循环遍历数据，每次循环新建一个<tr>标签，然后再把tr添加到table的结尾

的方式重新渲染数据。

JQuery的append()和appendTo()函数可以帮助我们实现这个处理。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>append测试</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		//$("<span>Hello World!</span>").appendTo("p");//第一种方法
        $("p").append("<span>Hello World!</span>");//第二种方法
	});
});
</script>
</head>
<body>

<button>在每个P元素结尾插入span元素。</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

点击按钮后会在<p>内嵌<span>元素，且内嵌在<p>在最后一个内嵌元素的后面。

append()和appendTo()函数没什么区别，主要是append()可以传入一个函数append(function(index,html))；其中

function()是必需的，参数index和html都是可选的。

prepend()函数类似于append()函数，不过prepend()函数内嵌的的元素会成为第一个内嵌元素，也就是放在首位。

prependTo()函数也是放在内嵌元素首位。

加载table数据的例子：

//data是后台传来的值
var empData = data.empData;
var tr;
$("#mytable").empty();//先清空全部内嵌元素
var th ="<tr><th>表头</th></tr>";
$("#mytable").append(th);
for(i in empData){
	tr = "<tr><td>"+empData[i].data+"</td></tr>";
	$("#mytable").append(tr);
}



//元素
<table id="mytable">
<tr><th>表头</th></tr>
</table>

appendChild

appendChild() 是原生js的函数，跟append用法一样，也是在元素内嵌元素的最后一个子节点后面添加元素，

但是该函数返回新的子节点

<div id="div1">元素</div>
    <script type="text/javascript">
    　　var op=document.createElement('p');
    　　var odiv=document.getElementById('div1');
    　　op.innerHTML="child";
    　　odiv.appendChild(op);
    </script>

Amazing_deron

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery的append(),appendTo(),prepend(),prependTo()用法

前端页面在通过ajax加载数据的时候，通常会通过返回的数据重新加载一个页面的数据或者表格，可以通过js先清空一个table的数据，然后循环遍历数据，每次循环新建一个&lt;tr&gt;标签，然后再把tr添加到table的结尾的方式重新渲染数据。JQuery的append()和appendTo()函数可以帮助我们实现这个处理。&lt;!DOCTYPE html&gt;&lt;ht...
复制链接

扫一扫

专栏目录