js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。
看一个之前我们js操作DOM的例子:
$(function () {
var ul0 = document.getElementsByTagName('ul')[0]; //第一个ul
var newli = document.createElement('li'); //li对象创建
// newli.innerHTML = '小马过河'; //创建的li添加内容 引号添加文本,反引号添加html。
newli.innerHTML = `小马过河`; //创建的li添加内容
ul0.appendChild(newli); //li对象追加到ul的最后
})
语法:
父元素.append(子元素)
解释:追加某元素,在父元素中添加新的子元素。子元素可以为:stirng | element(js对象) | jquery元素
代码:
"en"> "UTF-8">魔降风云变
PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之,就是一个移动操作。
似乎追加到第一个子标签后面了,难道不是追加到最后么?开头添加一个元素,结果还是第一个追加是在开头元素的后面,后面的追加到上一个追加的后面
其实是这样的:
指定索引的标签追加子元素,将子元素在第一个子元素内添加,这样的话,都是行内就一行显示,第一个子元素中有块级的就换行显示
不用指定索引的追加子元素才是正常的追加。
语法:
子元素.appendTo(父元素)
解释:追加到某元素 子元素添加到父元素
$(function () { $('使用选择器追加,是从父的最后一个追加,且与索引追加没冲突 ').appendTo($('.ul1')) $('使用索引添加,从第一行后面开始追加 ').appendTo($('ul :eq(0)')) })
$('
PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素
语法:
父元素.prepend(子元素);
解释:前置添加, 添加到父元素的第一个位置
$('ul').prepend('
父前置加子,这里父是第一个ul,li里文字和这里的文字都是行内所有一行显示,‘’是谁 ‘’ 在前
父使用索引 prepend放法,不是想象的那样
没有索引,prepend, 前置追加一个子
语法:
子元素.prependTo(父元素);
解释:前置添加, 添加到父元素的第一个位置
$('mmm').prependTo($('.ul1'))
语法:
兄弟元素.after(要插入的兄弟元素);
要插入的兄弟元素.inserAfter(兄弟元素);
解释:在匹配的元素之后插入内容
$('.ul1 li').after('mcw')
$('
元素对象.的后面加内容;$()对象点插入在元素选择器后 (非对象)
语法:
兄弟元素.before(要插入的兄弟元素);
要插入的兄弟元素.inserBefore(兄弟元素);
解释:在匹配的元素之后插入内容
$('.ul1 li').before('我是一个粉刷匠')
$('我是一个h5标题
').insertBefore('.ul2 li')
元素对象.的前面加内容 ;内容对象.插入前面在选择器选中的(非对象)
语法:
$(选择器).clone();
解释:克隆匹配的DOM元素