jQueryDOM操作相关方法——学习5

DOM操作

内部插入

append(content|fn) 会将元素添加到指定元素内部的最后

appendTo(content)

prepend(content|fn) 会将元素添加到指定元素内部的最前面

prependTo(content)

var $li = $("<li>新增的li</li>");
$("ul").append($li);
$li.appendTo("ul")
$("ul").prepend($li);
$li.prependTo("ul")

外部插入

after(content|fn) 会将元素添加到指定元素外部的最后

insertAfter(content)

before(content|fn) 会将元素添加到指定元素外部的前面

insertBefore(content)

var $li = $("<li>新增的li</li>");
$("ul").after($li);
$li.insertAfter("ul")
$("ul").before($li);
$li.insertBefore("ul")

删除

remove([expr]) 删除指定元素

detach([expr])

empty() 删除指定元素的内容和子元素，指定元素自身不会被删除

<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$("p").remove(); // 什么都没有了
$("p").empty(); // <p></p>

替换

replaceWith(content|fn) 替换所有匹配的元素为指定的元素

移动到目标位置来替换，而不是复制一份来替换

replaceAll(selector)

<p>Hello</p><p>cruel</p><p>World</p>
$("p").replaceWith("<b>Paragraph. </b>"); // <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
$("<b>Paragraph. </b>").replaceAll("p");

复制

clone([Even[,deepEven]]) 指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制

var $li = $("li").clone(false);
$("ul").append($li);