jQuery中的DOM操作

一个完整的DOM对象，包含了三个部分：元素、属性、文本。javascript中，原生的创建元素我们使用的是document.getElement(tagName)，参数是标签的名称，而且每次只能创建一个元素，如果你要创建的是一个比较复杂的DOM元素，如

<ul>
<li><span>text</span></li>
</ul>

在将这个对象转化成为DOM树之后，将会存在三个元素节点和一个文本节点，这意味着你需要调用三次document.createElement(tagName);此外还需要调用一次document.createTextNode(text)来创建一个文本节点。这还不够，你还需要去加上节点之间的关系。这样一个，创建DOM元素的代码量有点儿大。有了jQuery，能极大地减少我们的代码开发量。

1.生成DOM元素

jQuery中，你会写html代码，就能生成响应的DOM元素，我很佩服jQuery的强大，使用$()工厂函数就可以生成DOM元素，这里需要提供参数htmlStr，这是一个字符串，htmlStr像一般的html代码就可以了，比如说你想要创建一个无序列表，如

<ul>
<li>列表一</li>
<li>列表二</li>
</ul>

那么htmlStr='<ul><li>列表一</li><li>列表二</li><ul>';使用jQuery生成DOM元素就是这么简单。

2.添加DOM元素

DOM元素的添加，其实是在DOM树中加入节点，你需要去维持一个树形关系，因此，你可以添加孩子节点，也可添加兄弟节点。

添加孩子节点

两个比较常用的函数是parentNode.append(jQueryObject)和parent.prepend(jQueryObject)。

其中第一个函数是将孩子节点放到指定元素的所有孩子节点的最尾端，第二个函数是将孩子节点放到指定元素节点的最前端。

添加兄弟节点

两个比较常用的函数是sibling.before(jQueryObject)和sibling.after(jQueryObject)

其中第一个函数是将兄弟节点放在指定的元素节点前面，第二个函数是将兄弟节点放在指定元素节点的后面。

3.删除DOM元素

remove函数，remove函数如果不带参数，直接调用object.remove()，那么会将object从DOM文档树中删除。此外object还可以带上参数remove(str)，其中str可以看做是selector，在指定的object中，找到符合条件的元素，进行删除。

empty函数，清空一个节点中的所有内容。

4.复制节点

object.clone()可以复制object节点，但是如果object中绑定有事件，那么复制得到的对象是不会有绑定的事件的，需要我们自己去绑定。

5.替换节点

object.replace(htmStr)，这里jQuery会先利用htmlStr创建好DOM元素，再用这个DOM元素来替换掉object。

6.包裹元素

包裹分为内部包裹和外部包裹，内部包裹使用object.wrap(htmlStr)，外部包裹使用object.innerWrap(htmlStr)。