jQuery操作DOM节点的相关方法

1.在指定节点内插入新节点

   以下的内容都用于在打指定节点内添加新内容

1)        append(content):在jQuery对象包含的所有DOM节点内的尾部插入content所代表内容。

2)        append(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点，在每个节点的尾部依次插入function(index,html)函数的返回值。

3)        appendTo(selector):将当前jQuery对象包含的DOM元素添加到selecctor匹配的所有DOM的内部的尾部。

4)        prepend(content):在jQuery对象包含的所有DOM节点内的顶部插入content所代表的内容，其中content既可以是HTML字符串，也可以是DOM元素，还可以是jQuery对象。

5)        prepend(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点，在每个节点的顶部依次插入function(index,html)函数的返回值。

6)        prependTo(selector):将当前jQuery对象包含DOM元素添加到selector匹配的所的DOM有内部的顶端。

 下面是程序示范了这些方法的功能。

	
	
	



id为test2的元素

结果：

如果使用append(function(index,html))、prepend(function(index,html))则可以为不同元素添加不同的内容。如下：

	
	
	


1
2
3

2.添加外节点

以下的方法用于在目标节点的前面添加新节点

1)        after(content):在该jQuery对象包含的所有DOM节点之后添加content对应的内容。

2)        after(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点，在每个节点的后面依次添加function(index)函数的返回值。

3)        before(content):在该节点jQuery对象包含的所有DOM节点之前添加content对应的内容。

4)        before(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点，在每个节点的前面依次添加function(index)函数的返回值。

5)        insertAfter(selector):将当前jQuery对象包含的所有DOM节点插入到selector匹配的所有节点之前。

如下程序示范了以上几个插入方法。

	
	
	


id为test1的元素

id为test2的元素

结果：

3.替换

下面是方法用于替换节点DOM节点

1)        replaceWith(newContent):将当前jQuery对象包含的所有DOM对象替换成newContent.

2)        replaceWith(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点，依次使用function(index)函数的返回值来替换jQuery对象包含的每个节点。

3)        replaceAll(selector):将当前jQuery对象包含的所有DOM对象替换成selectot匹配的元素。

4.删除

下面是方法用于删除指定DOM节点

1)        empty():删除当前jQuery对象包含的所有DOM节点。

2)        remove([selector]):删除当前jQuery对象包含的所有DOM节点。

3)        detach(selector):该方法的功能与remove([selector])方法相似，区别只在于detach()方法会保留被删除元素上关联的jQuery数据，当需要在后面某个时刻重新插入该被删除元素时，则该方法会比较有用。

 

5.复制

  clone([withDataAndEvents]):复制当前jQuery对象包含的所有DOM元素并且选中这些复制出来的副本。当需要把DOM文档中元素的副本添加到其他位置时，这个函数非常有用。

	
	
	


id为test1的元素Java
id为test2的元素