辛苦堆砌,转载请注明出处,谢谢!
DOM操作是对DOM树进行插入,删除,修改。
1.创建新元素可以有三种方法:
(1)var newElement = $("<h1>newElement</h1>");
通过$函数创建
(2)var newElement = $("#old").clone();
通过已有的元素进行复制,clone()可以传递true,这样复制的元素也会复制已有元素的事件处理函数以及关联数据(data)。
(3)var newElement = document.createElement("h1")
使用DOM API进行创建
2.添加子元素或后代元素,分为两组:
(1)append(或append(function))和prepend(或prepend(function))
$(".A").append(newElement);
将newElement添加到class为A的元素之后
$(".A").prepend(newElement);
将newElement添加到class为A的元素之前
注意区别:
$("#A, #B").append(newElement);
可以将newElement添加到id为A和B的元素之后
$("#A").append(newElement);
$("#B").append(newElement.clone());
如果向id为B的添加时未进行clone,只是把添加到id为A的元素又移动到id为B的元素后,不会在A和B之后均添加。
(2)appendTo和prependTo
$(".A").appendTo(newElement);
将class为A的元素集添加到newElement元素之后
$(".A").prependTo(newElement);
将class为A的元素集添加到newElement元素之前
3.插入父元素(包裹元素),有三组:
(1)wrap(或wrap(function))和unwap
$(".A").wrap(newElement);
用newElement包裹class为A的元素,即给class为A的每个元素分别添加了父元素
(2)wrapAll
$(".A").wrapAll(newElement);
把class为A的元素集封装到newElement中,即给所有class为A的元素设置了公共的父元素,因此,这里的class为A的元素之间最好是兄弟关系。
(3)wrapInner(或wrapInner(function))
$(".A").wrapInner(newElement);
基本类似于wrap,只不过这个是包裹了元素的内容,而不是元素本身。
4.插入兄弟元素,分两组:
(1)after(或after(function))和before(或before(function))
$(".A").after(newElement);
将newElement作为下一个兄弟元素添加到class为A元素之后
$(".A").before(newElement);
将newElement作为上一个兄弟元素添加到class为A元素之前
(2)insertAfter和insertBefore
$(".A").insertAfter(newElement);
将class为A的元素集作为下一个兄弟添加到newElement元素之后
$(".A").insertBefore(newElement);
将class为A的元素集作为上一个兄弟添加到newElement元素之前
5.替换元素,分两组:
(1)replaceWith(或replaceWith(function))
$(".A").replaceWith(newElement);
用newElement替换class为A的元素集中的元素
(2)replaceAll
$(element).replaceAll($(".A"));
与replaceWith参数方向相反,即用element替换所有的class为A的元素集中的元素
6.删除元素,分三组:
(1)detach删除元素保留关联数据
(2)remove删除元素,不保留关联数据(彻底删除)
(3)删除父元素(unwrap)和后代元素(empty)
$(".A").unwrap();
删除class为A的每个元素的父元素
$(".A").empty();
删除class为A的每个元素的后代元素
![](https://img-my.csdn.net/uploads/201612/08/1481201471_6133.png)