节点操作

jQuery 节点操作

创建元素

语法：$('<li></li>')

追加元素

1. 向父元素最后追加

   • 语法：父元素jQuery对象.append(新创建的jQuery对象);
   • 语法：新创建jQuery对象.appendTo(‘父元素选择器’ 或 父元素jQuery对象);

2. 向父元素最前面追加

   • 语法：父元素jQuery对象.prepend(新创建的jQuery对象);
   • 语法：新创建jQuery对象.prependTo(‘父元素选择器’ 或 父元素jQuery对象);

   // 创建新节点 p
   let $newp = $('<p>xin</p>')
   // append()方法
   $('div').append($newp)
   // appendTo()方法
   $newp.appendTo($('div'))
   // appendTo()方法可以直接写父元素的选择器
   $newp.appendTo('div')
   

3. 向元素后面追加新的兄弟

   • 语法：jQuery对象.after(新创建的jQuery对象);
   • 语法：新创建jQuery对象.insertAfter(‘选择器’ 或 jQuery对象);

4. 向元素前面追加新的兄弟

   • 语法：jQuery对象.before(新创建的jQuery对象);
   • 语法：新创建jQuery对象.insertBefore(‘选择器’ 或 jQuery对象);

   let $newp = $('<p>新的</p>')
   // 兄弟元素div后添加新p
   $('div').after($newp)
   // 把新p 追加到兄弟div前
   $newp.insertBefore('div')
   // 把新p 追加到兄弟div后
   $newp.insertAfter($('div'))
   

删除元素

• 语法：jQuery对象.remove();
  $('div').remove()
• 删除谁就让谁调用这个方法

清空元素

1. jQuery对象.empty();
   推荐使用， 清空内部的所有元素及元素相关的事件
   $('body').empty()
2. jQuery对象.html(’’);(本质是用空字符串替代原来的内容)
   仅仅清空内部的元素，不清清理内存中的元素的事件。
   $('body').html('')

克隆元素

直接操作页面中的元素，让它插入到新位置，那么原来的位置就没有这个元素了。所以想要在某处插入新的相同元素，需要克隆。

• 语法：jQuery对象.clone(布尔值); 返回克隆好的元素
• 参数：默认是false,表示仅仅克隆内容。 true，克隆内容和内容绑定的事件