一.插入操作
1.内部插入
(1)追加到内容之后
var str = 'abc';
$('.btn').append(str);//参数可以为字符串或者对象
$('<span>abc</span>').appendTo($('.btn'));
var str = '<span>123</span>';
$(str).appendTo($('.btn'));//前面不能是字符串
(2)追加到内容之前
var str = 'abc';
$('.btn').prepend(str);//可以用函数插入内容
$(str).prependTo($('.btn'));
var str = '<div>123</div>';
$(str).prependTo($('.btn'));
2.外部插入
var str = $('<span>标签</span>');
$('.btn').after(str);
$('.btn').before(str);
var str = $('<span>标签</span>');
str.insertAfter($('.btn'));
str.insertBefore($('.btn'));
二.元素包裹
$('.btn').wrap('<div></div>');
$('.btn').wrap($('<div></div>'));
$('.btn').wrap(function (index) {
return $('<div></div>');
});
$('.btn').wrapAll('<div></div>');//找到同类的全部包裹起来
$('.btn').wrapInner('<div></div>');//把元素的字内容全部包起来
三.移除包裹元素
$('.btn').unwrap();
四.元素替换
$('.btn').replaceWith('<div>123</div>');
$('<div>123</div>').replaceAll($('.btn'));
五.元素克隆
$('body').append($('.btn').clone());
六.清除所有子节点
$('.btn').empty();
七.删除元素
var button = $('.btn');
button.click(function () {
console.log(1);
});
button.remove();//全部删除
button.detach();//移除被选元素
$('.btn').remove('.list');
button[0].click();