心灵鸡汤:心若强大又何惧路艰,心无风雨又何盼他人执伞
1.1动态创建元素
// $()函数的另外一个作用:动态创建元素
var $spanNode = $(“我是一个span元素”);
var node = $(“#box”).html(“
我是li ”);
1.2添加元素(只是常用的方法,不常用的不在介绍)
在元素的最后一个子元素后面追加元素:
append()(重点)
作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以)
如果是页面中存在的元素,那么调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了。
如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去。
//在$(selector)中追加$node
$(selector).append($node);
2 prepend()
作用:在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
3 after()
作用:在被选元素之后,作为兄弟元素插入内容或节点
$(selector).after(node);
4 before()
作用:在被选元素之前,作为兄弟元素插入内容或节点
$(selector).before(node);
1.3html创建元素(推荐使用,重点)
作用:设置或返回所选元素的html内容(包括HTML标记)
设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的innerHTML属性相同
//动态创建元素
$(selector).html(‘传智播客’);
//获取html内容
$(selector).html();
1.4清空元素
//清空指定元素的所有子元素(光杆司令)
//没有参数
$(selector).empty();
$(selector).html(“”);
// “自杀”把自己(包括所有内部元素)从文档中删除掉
$(selector).remove();
1.5复制元素
作用:复制匹配的元素
//复制$(selector)所匹配到的元素
//返回值为复制的新元素
$(selector).clone();