jQuery 节点操作

jQuery 节点操作

1、动态创建元素

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

2、添加元素

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

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

/注意/：
// 1.如果是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，然后再插入到新的位置。
// 2.如果是给多个目标追加一个元素，那么append()方法的内部会复制多份这个元素，然后追加到多个目标里面去。（最好不要这么做）
常用参数：htmlString 或者 jQuery对象

/不常用操作/：（用法跟append()方法基本一致）
$(selector).appendTo(node);  作用：同append()，区别是：把$(selector)追加到node中去
$(selector).prepend(node);   作用：在元素的第一个子元素前面追加内容或节点
$(selector).after(node);     作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).before(node);    作用：在被选元素之前，作为兄弟元素插入内容或节点

3、html创建元素

/作用/：设置或返回所选元素的html内容（包括 HTML 标记）
设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同

// 动态创建元素
$(selector).html("我是文本");
// 获取html内容
$(selector).html();

总结：推荐使用html("")方法来创建元素或者html("")清空元素

4、清空元素empty()、html()、remove()

// 清空指定元素的所有子元素（光杆司令）
// 没有参数
$(selector).empty();
$(selector).html("");

// "自杀" 把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();

5、复制元素

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