A front end base node operation -jQuery

Chapter 10 jQuery node operation

10.1 Creating nodes

// $(htmlStr)
// htmlStr：html格式的字符串
$('<span-这是一个span元素</span-');

10.2 Add Nodes

append  appendTo		在被选元素的结尾插入内容   父.append(子)  子.appendTo(父)
prepend prependTo		在被选元素的开头插入内容   父.prepend(子) 子.prependTo(父)
before  insertBefore	在被选元素之后插入内容		后.before(前)  前.insertBefor(后)
after	insertAfter		在被选元素之前插入内容 	前.after(后)   后.insertAfter(前)

10.3 Empty nodes and delete nodes

• empty: empty all the elements of the specified node, itself retained (to clean house)

$('div').empty(); // 清空div的所有内容（推荐使用，会清除子元素上绑定的事件）
$('div').html('');// 使用html方法来清空元素，不推荐使用，绑定的事件不会被清除。

• remove: Compared to empty, delete itself (suicide)

$('div').remove();

10.4 clone node

• Role: Duplicate matching elements

// 复制$(selector)所匹配到的元素（深度复制）
// cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();//克隆元素本身及后代
$(selector).clone(true);//克隆元素本身及后代以及绑定的事件