jquery操作DOM
1.内部插入
|
方法名 |
方法的说明 |
|
appendTo |
把创建的新元素加入某个元素里面的尾部 |
|
append |
在某个元素的里面的尾部加入新元素 |
|
prependTo |
和以上同，只是加入到内部的前面 |
|
prepend |
------------------- |
append()向每个匹配的元素内部追加内容(标签有效)。$(document).ready(function(){
$("p").append("<b>Hello</b>");
});
appendTo()把所有匹配的元素追加到另一个指定的元素集合中
把p段落追加到div中：
$(document).ready(function(){
$("p").appendTo("div");
});
prepend()向所有匹配元素内部的开始处插入内容：
$(document).ready(function(){
$("p").prepend("前置内容");
});
prependTo()把所有匹配的元素前置到另一个、指定的元素元素集合中。
把p段落前置到div中：
$(document).ready(function(){
$("p").prependTo("div");
});
<body>
<p>我是p。</p>
<div>我是div</div>
</body>
2.外部插入
|
方法名 |
方法的说明 |
|
after |
创建的新元素加入某个元素里面的后面 |
|
before |
创建的新元素加入某个元素里面的前面 |
在段落之后插入：
$(document).ready(function(){
$("p").click(function(){
$("p").after("<b>插入元素后面</b>");
});
});
在段落之前插入：
$(document).ready(function(){
$("p").click(function(){
$("p").before("<b>插入元素前面</b>");
});
});
将p元素插入div后面：
$(document).ready(function(){
$("p").click(function(){
$("p").insertAfter("div");
});
});
将p元素插入div前面：
$(document).ready(function(){
$("p").click(function(){
$("p").insertBefore("div");
});
});
<body>
<p>p</p>
<div>div</div>
</body>
3.包裹
wrap()把所有匹配的元素用其他元素的结构化标记包裹起来。
把所有的段落用一个新创建的div包裹起来:
$("p").click(function(){
$("p").wrap("<div id='wrap'></div>");
});
unwrap()这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果
$("p").click(function(){
$("p").unwrap();
});
wrapAll()将所有匹配的元素用单个元素包裹起来
wrapInner()将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
把所有段落内的每个子内容加粗:
$("p").click(function(){
$("p").wrapInner("<b></b>");
});
4.复制、替换、删除
|
方法名 |
方法的说明 |
|
replaceWith |
老元素被替换成新元素 |
|
replaceAll |
新元素替代老元素 |
|
clone（boolean） |
复制（参数为true表可复制） |
|
empty |
讲选中的元素清空 |
|
remove |
移除某个元素 |
4.替换
replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。
把所有的段落标记替换成加粗的标记:
$("p").click(function(){
$("p").replaceWith("<b>替换</b>");
});
replaceAll()用匹配的元素替换掉所有 selector匹配到的元素
$("p").click(function(){
$("<b>替换</b>").replaceAll("p");
});
5.删除
empty()删除匹配的元素集合中所有的子节点。
$("p").click(function(){
$("p").empty();
});
remove()从DOM中删除所有匹配的元素。
$("p").click(function(){
$("div").remove();
});
删除class为dd的div：
$("p").click(function(){
$("div").remove(".dd");
});
detach()从DOM中删除所有匹配的元素。不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$("p").click(function(){
$("div").detach(".dd");
});
<body>
<p>p</p>
<p class="hello">pp</p>
<div>div</div>
<div class="dd">dd</div>
</body>
6.复制
clone()克隆匹配的DOM元素并且选中这些克隆的副本
复制b元素并插入到段落中前置：
$("p").click(function(){
$("b").clone().prependTo("p");
});
复制一个按钮，他可以复制自己，并且他的副本也有同样功能。(设置true才可以让副本也可以复制自己)
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
<body>
<p>p</p>
<p class="hello">pp</p>
<div>div</div>
<div class="dd">dd</div>
<b>Hello</b>
<button>fuzhi</button>
</body>
浙公网安备 33010602011771号