之前js咱们就学习了js的DOM的操作  也就是所谓的增删改查 DOM的操作 通过js的DOM的操作，大家也能发现 大量的繁琐的代码实现  我们想要的效果 那么JQUERY的文档操作的API提供了便利的方法供我们操作文档

看一个之前的js  操作DOM的例子

 

var oUl = document.getElementsByTagName('ul')[0];var oLi = document.createElement('li');oLi.innerHTML = '赵云';oUl.appendChild(oLi);

 

一.插入操作

知识点1：

语法：

父元素.append(子元素)

解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

代码如下：

写法一：

var oli = document.createElement('li');  //创建一个li标签oli.innerHTML = '哈哈哈';  //这个li标签内的  内容是 哈哈哈$('ul').append('
1233
');$('ul').append(oli);$('ul').append($('#app'));

PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。

写法二：

$('body').append('
666
')  //着是在你的body的后面加入一个p标签元素

 

 

知识点2：

语法：

子元素.appendTo(父元素)

解释：追加到某元素 子元素添加到父元素

$('
天王盖地虎
').appendTo($('ul')).addClass('active')

PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

 

$('
就是你
').appendTo('ul'); //把p标签加入到ul内

 

知识点3：

语法：

父元素.prepend(子元素)；

解释：前置添加， 添加到父元素的最后个位置

$('ul').prepend('
我是第一个
')

 

$('ul').prepend('九九九');//把i表签添加到ul第一个位置

知识点4：

语法：

父元素.prependTo(子元素)；

解释：后置添加， 添加到父元素的第一个位置

$('路飞学诚').prependTo('ul')

 

$('Study Where').prependTo('ul');  //把a 标签内的 内容添加到ul内的第一个位置

append和prepen  appendTo 和prependTo刚好相反的

 

知识点5：

after在一个标签后面添加元素而不是它内部的最后 

语法：

前元素.after(后元素)； 子元素.inserAfter(父元素)；  插入在父级的前面

解释：在匹配的元素之后插入内容 

$('ul').after('
我是一个h3标题
') $('
我是一个h2标题
').insertAfter('ul')

 

$('ul').after('你是谁'); //把标签u添加到 ul的后面

知识点6：

语法：

父元素.before(子元素)； 子元素.inserBefore(父元素)；

解释：在匹配的元素之后插入内容 

$('ul').before('
我是一个h3标题
') $('
我是一个h2标题
').insertBefore('ul')

after 和insertAfter的都是插入在一个元素后面 但是只是参照点不同 after的参照点在前 insertAfter的参照在后 

 

二、克隆操作

语法：

$(选择器).clone();

解释：克隆匹配的DOM元素

$('button').click(function() {  // 1.clone()：克隆匹配的DOM元素 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)  $(this).clone(true).insertAfter(this);})

三、修改操作

知识点1：

语法：

$(selector).replaceWith(content);

将所有匹配的元素替换成指定的string、js对象、jquery对象。

//将所有的h5标题替换为a标签$('h5').replaceWith('hello world')//将所有h5标题标签替换成id为app的dom元素$('h5').replaceWith($('#app'));

 

 

$('li').replaceWith(''); //把li标签都换成a 标签$('li')[0].replaceWith(''); //把li标签的第一个换成a 标签

 

知识点2：

语法：

$('
哈哈哈
')replaceAll('h2');

解释：替换所有。将所有的h2标签替换成p标签。

$('
     
按钮').replaceAll('h4')

4、删除操作

4、删除操作

知识点1：

语法：

$(selector).remove();

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove

 

 

知识点2：

语法：

$(selector).detach();

解释：删除节点后，事件会保留

var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn)

 

 

知识点2：

语法：

$(selector).detach();

解释：删除节点后，事件会保留

var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn)

 

 

 

 

 .