Jquery动态插入DOM节点的方法总结:
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);//移动节点
});