jquery插入节点是一个非常有用的而且操作简单的功能点。在实际开发中我们难免会需要动态创建节点，用于展示我们的数据或者动态创建节点用于我们自己特有的业务。

jquery提供了好几个插入方法：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。下面我们一一讲解这几个方法。

1、append()方法

解释:向每一个匹配到的元素内部追加内容。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery的dom操作</title><script src="../jquery-1.3.1.js"></script>
</head>
<body><p title="选择你喜欢的水果">你最喜欢的水果是?</p><ul> <li title="苹果">苹果</li><li title="橘子title">橘子</li><li title="菠萝">菠萝</li></ul>
</body>
<script> $(function(){$("li").append("<b>你好</b>");});
</script>
</html>

2、appendTo()方法

将所有匹配的元素追加到指定的元素中。语法：$(A).appendTo(B)。实际就是把A添加到B中。

A可以是新建的jquery元素节点，也可以是已经存在文档中通过选择器定位到的元素节点。

B代表的是目的地。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery的dom操作</title><script src="../jquery-1.3.1.js"></script>
</head>
<body><p title="选择你喜欢的水果">你最喜欢的水果是?</p><ul> <li title="苹果">苹果</li><li title="橘子title">橘子</li><li title="菠萝">菠萝</li></ul>
</body>
<script> $(function(){$("p").appendTo("li");});
</script>
</html>

上面的代码代表的就是将文档中已经存在的p元素节点追加到匹配到的li元素之中。此时，原来的p会消失，出现我们匹配的地方。

3、prepend()方法

向每一个匹配到的元素内部的最前面追加内容。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery的dom操作</title><script src="../jquery-1.3.1.js"></script>
</head>
<body><p title="选择你喜欢的水果">你最喜欢的水果是?</p><ul> <li title="苹果">苹果</li><li title="橘子title">橘子</li><li title="菠萝">菠萝</li></ul>
</body>
<script> $(function(){//将文档中的li元素前置到p元素当中，同时原来位置的li元素会消失$("p").prepend($("li"));//回复到文档最初的样子$("ul").prepend($("li"));//前置添加新新创建的元素$("ul").prepend("<li>最前面</li>");});
</script>
</html>

4、prependTo()方法

有了appendTo()方法作为基础，我们再次理解prependTo()方法应该是手到擒来。就是像每一个匹配到的元素追加到指定的元素节点中。而且追加的位置时目的元素节点的最前面。语法：$(A).prependTo(B);

A可以是文档中已经存在的元素同时也可以是新建的元素节点，代表的是选择器或者直接是节点。

B代表的是目的元素，一般是选择器。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery的dom操作</title><script src="../jquery-1.3.1.js"></script>
</head>
<body><p title="选择你喜欢的水果">你最喜欢的水果是?</p><ul> <li title="苹果">苹果</li><li title="橘子title">橘子</li><li title="菠萝">菠萝</li></ul>
</body>
<script> $(function(){//将p元素前置到文档中li元素内部的最前面$("p").prependTo("li");//等价于$("p").prependTo($("li"));//再将p元素前置到文档中ul元素的内部的最前面$("p").prependTo("ul");});
</script>
</html>

前面的四种方法都是在指定元素的内部插入节点。而下面的四种方法都是在指定元素的外部的前面或者后面插入节点。

5、after()方法

就是在指定元素的外部后追加元素。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery的dom操作</title><script src="../jquery-1.3.1.js"></script>
</head>
<body><p title="选择你喜欢的水果">你最喜欢的水果是?</p><ul> <li title="苹果">苹果</li><li title="橘子title">橘子</li><li title="菠萝">菠萝</li></ul>
</body>
<script> $(function(){//在p元素的后面同时是ul的前面添加li元素，同时之前在ul中的li元素消失$("p").after($("li"));});
</script>
</html>

6、insertAfter()方法

语法：$(A).insertAfter(B)。就是将A添加到B的元素外的后面。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery的dom操作</title><script src="../jquery-1.3.1.js"></script>
</head>
<body><p title="选择你喜欢的水果">你最喜欢的水果是?</p><ul> <li title="苹果">苹果</li><li title="橘子title">橘子</li><li title="菠萝">菠萝</li></ul>
</body>
<script> $(function(){//在p元素的后面同时是ul的前面添加li元素，同时之前在ul中的li元素消失$("p").insertAfter("li");//$("p").等价于insertAfter.($("li"));});
</script>
</html>

上下的before()方法和insertBefore()放发和after()放差不多，就是意思相反。

jquery插入节点相关推荐

jQuery插入节点，移动节点
<script type="text/javascript">//<![CDATA[ $(function(){var $li_1 = $("<l ...
jquery在节点后后添加html,jquery如何添加节点？
jquery如何添加节点?下面本篇文章给大家介绍一下使用jquery添加节点的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery如何添加节点? jQuery插入节点的 ...
jQuery:插入,复制,替换和删除节点
<html> <head> <meta http-equiv="Content-Type" content="text/html; ...
jquery 元素节点操作 - 创建节点、插入节点、删除节点
jquery的节点操作说明前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的. 使用html()操作节点首先编写一个div包含一个 ...
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
jquery元素节点操作
jquery元素节点操作创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...
jQuery DOM 节点操作
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...
jQuery初识 - jQuery关于节点的相关方法
jQuery添加节点的相关方法内部插入 append(content|fn) appendTo(content) 会将元素添加到指定元素内部的最后 prepend(content ...
JQueryDOM之插入节点
插入节点本篇文章主要介绍在jQuery中插入节点的几种常用方法: 插入子节点: append() 向每个匹配的元素内部追加内容 appendTo()将所有匹配的元素追加到指定的元素中. ...

jquery插入节点