本文实例讲述了jquery插入dom节点的方法。分享给大家供大家参考。具体分析如下：
动态创建html元素并没有实际用处，还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。前面使用了一个插入节点的方法append()，它会在元素内部追加新创建的内容。
将新创建的节点插入某个文档的方法并非只有一种，在jquery中还提供了其他儿种插入节点的方法，如下表所示。读者可以根据实际需求灵活地做出多种选择。
html dom结构如下：
欢迎访问脚本之家
简单易懂的php编程 简单易懂的javascript编程 简单易懂的jquery编程
append()
向每个匹配的元素内部追加内容：
html代码：
复制代码 代码如下:
我想说：
jquery代码：
复制代码 代码如下:
$(p).append(你好);
结果：
复制代码 代码如下:
我想说：你好
appendto()
将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(a).append(b)的操作，即不是将b追加到a中，而是将a追加到b中：
html代码：
复制代码 代码如下:
我想说：
jquer代码：
复制代码 代码如下:
$(你好).appendto(p);
结果：
复制代码 代码如下:
我想说：你好
prepend()
向每个匹配的元素内部前置内容：
html代码：
复制代码 代码如下:
我想说：
jquer代码：
复制代码 代码如下:
$(p).prepend<你好);
结果：
复制代码 代码如下:
你好我想说：
prependto()
将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(a).prepend(b)的操作，即不是将b前置到a中，而是将a前置到b中：
html代码：
复制代码 代码如下:
我想说：
jquer代码：
复制代码 代码如下:
$(你好).prependto(p);
结果：
复制代码 代码如下:
你好我想说：
after()
在每个匹配的元索之后插入内容：
html代码：
复制代码 代码如下:
我想说：
jquer代码：
复制代码 代码如下:
$(p).after(你好);
结果：
复制代码 代码如下:
我想说：
你好
insertafler()
将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(a).after(b)的操作，即不是将b插入到a后面，而是将a插入到b后面：
html代码：
复制代码 代码如下:
我想说：
jquer代码：
复制代码 代码如下:
$(你好).insertafter(p);
结果：
复制代码 代码如下:
我想说：
你好
before()
在每个匹配的元素之前插入内容：
html代码：
复制代码 代码如下:
我想说：
jquer代码：
复制代码 代码如下:
$(p).before(你好);
结果：
复制代码 代码如下:
你好我想说：
insertbefore()
将所有匹配的元素捅入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(a).before(b)的操作，即不是将b插入到a前面，而是将a插入到b前面：
html代码：
复制代码 代码如下:
我想说：
jquer代码：
复制代码 代码如下:
$(你好).insertbefore(p);
结果：
复制代码 代码如下:
你好我想说：
这些插入节点的方法不仅能将新创建的dom元素插入到文档中，也能对原有的dom元素进行移动。例如利用它们创建新元素并对其进行插入操作：
$(function(){ var $li_1 = $(新增节点：数据结构); // 创建第一个元素 var $li_2 = $(新增节点：设计模式); // 创建第二个元素 var $li_3 = $(新增节点：计算机算法); // 创建第三个元素 var $parent = $(.nm_ul); // 获取节点。的父节点 var $two_li = $(.nm_ul li:eq(1)); // 获取节点中第二个元素节点 $(#btn_1).click(function(){ $parent.append($li_1); // 添加到节点中，使之能在网页中显示 }); $(#btn_2).click(function(){ // 可以采取链式写法：$parent.append($li_1).append($li_2); $parent.append($li_2); }); $(#btn_3).click(function(){ // insertafter方法将创建的第三个元素元素插入到获取的之后 $li_3.insertafter($two_li); });});
也利用它们对原有的dom元素进行移动：
$(function(){ var $one_li = $(ul li:eq(1)); // 获取节点中第二个元素节点 var $two_li = $(ul li:eq(2)); // 获取节点中第三个元素节点 $two_li.insertbefore($one_li); //移动节点});
希望本文所述对大家的jquery程序设计有所帮助。