jQuery Dom 操作 增、删、改、复制、包裹

1. 增（插入）

内部插入

//向每个匹配的元素内部追加内容，为最后一个子元素
$('.violet').append('<div></div>');

//把所有匹配的元素追加到另一个指定的元素集合中
$('<div></div>').appendTo('.violet');

//将指定元素插入到匹配元素里面作为它的第一个子元素，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数
$('.violet').prepend('<div></div>');

//把所有匹配的元素前置到另一个指定的元素集合中，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。
$('<div></div>').prepend($('.violet'));

外部插入

//在匹配元素集合中的每个元素后面插入参数所指定的内容，作为兄弟节点，支持多参数处理
$(".violet").after('<div></div>', '<div></div>');

//据参数设定，在匹配元素的前面插入内容，也是作为兄弟节点，支持多参数处理
$(".violet").before('<div></div>', '<div></div>');

//和 before() 一样的功能，只是选择器写在内容对象的后面，不支持多参数处理
$('<a></a>', '<p></p>').inserBefore($(".violet"));

//和 after() 一样的功能，只是选择器写在内容对象的后面，不支持多参数处理
$('<a></a>', '<p></p>').insertAfter($(".violet"));

2. 删（移除）

// 移除 .violet 里的所有内容，但会保留 .violet 这个元素节点
$('.violet').empty();

//删除 .violet 这个元素节点，包括里面的所有内容，绑定的事件及与该元素相关的 jQuery 数据，有参数时可以做筛选
$('.violet').remove();

// 删除保留数据,只是显示效果没有了，所有绑定事件、附加的数据等都会保留下来，此方法是 jQuery 特有的
$('.violet').detach();

3.  改（替换）

//用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
$(".violet > div:first p:eq(1)").replaceWith('<a style="color:violet">violet-gem</a>');

// replaceAll()和 replaceWith() 功能类似，但是目标和源相反
$('<a style="color:violet">violet-gem</a>').replaceAll('.violet > div:last pLlast');

4. 复制（克隆）

//只复制结构，事件丢失
$('.violet').clone();

//结构、事件与数据都复制
$('.violet').clone(true);

5. 包裹

//在集合中匹配的每个元素周围包裹一个 HTML 结构
$('span').wrap('<div></div>'); //给 span 标签外面又加了一个 div 标签

//作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置
$('span').unwrap('<div></div>');

//给集合中匹配的元素增加一个外面包裹HTML结构
$('.violet').wrapAll('<div></div>'); //给所有类名为 .violet 的元素添加 div 标签

//wrapAll接受一个回调函数
//每一次遍历this都指向了合集中每一个 a 元素
$('a').wrapAll(function() {
    return '<div></div>'
});

//将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素
$('.violet').wrapInner('<p></p>'); //给所有 .violet 加一个内部包裹的父容器 p

//wrapInner接受一个回调函数
//每一次遍历this都指向了合集中每一个class=left1的div元素
$('.left1').wrapInner(function() {
    return '<a></a>'
});