jQuery中的DOM操作

DOM操作又叫节点操作,标签操作,元素操作

append()

再选中元素的里边的最后边

$("body").append("<h1>通过append方法追加到了body的尾部</h1>")

$(".one").append("<p>追加的内容</p>")

appendTo()

$("<p>appendTo追加</p>").appendTo(".two")

$("<p></p>") 叫做创建一个元素,jquery对象(其实就是在原有标签的基础上做了一些改造)

var newElement = $("<a href="http://www.baidu.com">百度</a>")

newElement.appendTo(".two")

prepend()

$("div").prepend("<h1>在div里边的最前边加一个h1标签</h1>")

$("div").prepend($("<p>生成一个jquery对象p</p>"))

prependTo()

$("<p>给div里边的最前边加一个p标签</p>").prependTo("div")

after,insertafter都是添加的兄弟

$("div").after("<p>在div的后边添加一个p标签</p>")

$("ul li:eq(1)").after("<li>在ul列表的了第二个li标签的后边添加一个li标签</li>")

$("<p>在div的后边插入一个p标签</p>").insertafter("div")

修改标签后的内容

$("div").html("<h1>h1<h1>")

$("div").html("注意添加内容后会覆盖掉全部的标签")

移除元素

$("div").remove()

删除内部所有的节点,但自己的节点仍然存在

$("div").empty()

保存一下已经删除的元素,便于将来继续使用

var temp = $("div").detach()

$(temp).appendTo("body")

给符合条件的元素加包裹,在元素的外部包裹

$("div").wrap("<div></div>")

给符合条件的元素加包裹,在元素的内部包裹

$("div").wrapInner("<h1></h1>")

把符合条件的所有元素包裹在一个标签内

$("div").wrapAll("<li></li>")

替换

$("<h1>用h1替换掉所有的div</h1>").replaceAll("div")