jquery 节点操作(动态创建元素/添加元素/清空元素/复制元素)

节点操作

1. 动态创建元素

// $()函数的另外一个作用：动态创建元素
var $span = $(“<span>我是一个span元素</span>”);

2. 添加元素

append()

作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（页面中存在或者创建出来的元素都可以）

//在$(selector)中追加$node
$(selector).append($node);
//在$(selector)中追加div元素，参数为htmlString
$(selector).append('<div></div>');

如果是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，然后再插入到新的位置。

如果给多个目标追加一个元素，append()方法内部会将这个元素复制多份，然后追加到多个目标中。（最好不要这么做）

常用参数：htmlString 或 jQuery对象

不常用操作（了解即可）：（用法跟append()方法基本一致）

 

appendTo()

作用：同append()，区别是：把$(selector)追加到node中去

$(selector).appendTo(node);

prepend()

作用：在元素的第一个子元素前面追加内容或节点

$(selector).prepend(node);

after()

作用：在被选元素之后，作为兄弟元素插入内容或节点

$(selector).after(node);

before()

作用：在被选元素之前，作为兄弟元素插入内容或节点

$(selector).before(node);

 

3. html创建元素 （推荐）

作用：设置或返回所选元素的html内容（包括 HTML 标记）

设置内容的时候，如果是html标记，会动态创建元素，此时作用跟JS里面的innerHTML属性相同

// 动态创建元素
$(selector).html(‘<span>传智播客</span>’);
// 获取html内容
$(selector).html();

4. 清空元素

//清空指定元素的所有子元素
$(selector).empty();
$(selector).html(“”);
//”自杀”把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();

如果有事件,使用html("")方法清空节点并不会清除事件,而empty方法则会清除元素上的所有事件,因此推荐使用empty方法清空节点

5. 复制元素

// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();