工作中经常会用遇到向DOM树中插入元素的问题,jQuery中有几个方法可以很好地解决问题,但是经常把他们的用法弄混淆,今天任务之余总结如下:
1、append()也是最常用的一种方法 。
它的功能是: 向要插入的父元素的最后一个子节点后面依次插入元素
插入前的DOM树是这样的:
执行 $("ul").append("<li>444</li>")
后的结果是:
2、appendTo()
它的功能是:插入‘到’摸个元素中 appendTo中的To可以理解为‘到’的意思
插入前的DOM树是这样的(父元素没有子元素):
执行$("<p>aaaaa</p>").appendTo($("#bbb"))
后结果是:
注:父元素有子元素时的情况刚好和append()相同 如图:
3、before()
它的功能是:在某元素‘的’前面插入
插入前的DOM树是这样的:
执行$("p").before("<p>hello</p>")
(在p元素‘的’前面插入 , 调用before()方法时的‘.’可以理解为‘的’意思)后结果是:
4、after()
它的功能和before()相反 在用法上和before()完全相同 这里就不在赘述。
jQuery的各种插入方法
最新推荐文章于 2024-02-07 13:23:17 发布