jq——DOM文档处理

内部插入：父子级关系

1 $(a).append($(b))把b插入到a里面(a里面的面后)

$("div").append($("<p>段落</p>"));

2 $(b).appendTo($(a))：把b放到a里面(a里面的后面)

 

3 $(a).prepend($(b)):把b插入到a中(a里面的前面)

4 $(b).prependTo($(a)):把b插入到a中(a里面的前面)

$("p").prependTo($("div"));

这种插入一定是父子级关系

外部插入：兄弟级关系

1 $(a).after($(b));把b插入到a的后面

$("div").after("<b>这是b标签</b>");

2 $(a).before($(b));把b插入到a的前面

$("<b>这是一个新标签</b>").insertAfter($("div"));

3 $(a).before($(b)):把b插入到a的前面

$("div").before($("<p>这是一个新段落</p>"));

4 $(b).insertBefore($(a)):把b插入到a前面

包裹

1 wrap:包裹$(a).wrap($(b)):把a用b包裹起来

类似于这样

2 unwrap:取消包裹

$("div").unwrap('<p></p>');

3 wrapAll:把所有的都包裹起来【所有元素都会被一个包裹起来】

$("div").wrapAll('<p></p>');

4 wrapInner:内部包裹

$("div").wrapInner('<p></p>');

替换

1 $(a).replaceWith($(b)) 把a 替换成b

$("div").replaceWith("<p>aaa</p>");

2 $(b).replaceAll($(a)):所有都替换，把b替换成a

$("<p>aaa</p>").replaceAll("div");

删除

1 empty:删除的是内容

$("#d1").empty();

删除标签内的东西，包括标签

2 remove:删除的是整个标签

$("#d1").remove();

复制

clone:复制出一个一模一样的元素