WEB前端jQuery—节点操作

创建节点

• 语法: $(完整html标签)，如$('<li></li>')创建了一个li标签。

添加节点

添加方式

• jq对象.append(jq对象)

• jq对象.append(完整html标签)，示例：

  $('div').append('<a href="#">');
  

• jq对象.append(选择器)，示例：

  $('div').append('.one');
  

方法

• A.append(B)：A后边加B(内部)
• A.appendTo(B)：A加在B后边(内部)
• A.prepend(B)：A前边加B(内部)
• A.prependTo(B)：A加在B前边(内部)
• A.after(B)：在整个A后边加B(外部)
• A.before(B)：在整个A后边加B(外部)

注意：下面的几种写法是等效的

A.append(B) = B.appendTo(A) = B.prepend(A) = A.prependTo(B);

清空节点:

• jq对象.empty()：清空元素文本

• jq对象.remove()：移除元素，并将对象的后代元素全部清空

克隆节点

语法: jq对象.clone()，参数如下

• false(默认) -> 深拷贝，但不复制事件
• true -> 深拷贝，会复制事件

示例

// 点击不执行p内的函数
$("p").clone().appendTo("div");	
// 点击会执行p内的函数
$("p").clone(true).appendTo("div");
// 点击qq表情.将其追加到发言稿中
$(function() {
    // 给img图片添加onclick事件
    $('ul img').click(function() {
        // 追加到p标签
        $('.word').append($(this).clone()); 
    });
});