jQuery DOM操作

HTML代码：

<div id="div1">
	div1
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

append与appendTo

示例：把一个图片追加div1的内部最后

$("#div1").append("<img src='../../starbucks/img/coffee.png' />");
$("<img src='../../starbucks/img/coffee.png' />").appendTo("#div1");

prepend与prependTo

示例：在内部最前方插入

$("#div1").prepend("<img src='../../starbucks/img/coffee.png' />");
$("<img src='../../starbucks/img/coffee.png' />").prependTo("#div1");

after与insertAfter

示例：在div1的外部，后面插入节点

$("#div1").after("<p>这是一个p标签</p>");
$("<p>这也是一个p标签</p>").insertAfter("#div1");

before与insertBefore

示例：在div1外部，前面插入节点

$("#div1").before("<p>这是一个p标签</p>");
$("<p>这也是一个p标签</p>").insertBefore("#div1");

wrap、wrapAll、unwrap与wrapInner

示例：为每一个选中的节点都套一层父节点

$("#div1").wrap("<section></section>");

示例：将选中的所有节点包裹在同一父节点中

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

示例：删除选中节点的父节点

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

示例：将选中节点中的所有子元素，包裹在一个新的父节点中

新的父节点依然是当前元素的唯一子节点

$("div1").wrapInner("<div></div>");

replaceWith与replaceAll

示例：将所有选中节点替换为新的节点

$("div p").replaceWith("<span>1</span>");
$("<span>2</span>").replaceAll("div p");

empty、remove与detach

示例：清空当前节点中的内容，但会保留当前节点标签

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

示例：删除当前节点，以及当前节点的所有子节点

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

示例：删除当前节点，以及当前节点的所有子节点

$("#div1").detach();

【remove和detach的区别】

使用remove删除的节点，恢复以后，将不再保留节点所绑定的事件

使用detach删除的节点，在节点恢复以后，可以恢复节点之前绑定的数据

$("#div1").click(function(){
alert("123");
});
var div1=null;
$("button:eq(0)").click(function(){
div1=$("#div1").remove();
});
				
$("button:eq(1)").click(function(){
	div1=$("#div1").detach();
});
				
$("button:eq(2)").click(function(){
	$("#div2").before(div1);
});

【js中的cloneNode()与jQuery中clone()的区别】

1.cloneNode() 如果不传参或者参数传入的为false，表示只克隆当前节点，不克隆子节点

参数传入true，表示克隆当前节点及所有子节点

2.clone() 无论传入tru还是false都会克隆当前节点及其所有子节点

传入true表示克隆节点的同时将包括节点所绑定的事件

否则，只表示克隆节点，而不克隆事件

$("#div1").clone().insertBefore("button:eq(0)");
$("#div1").clone().empty().insertBefore("button:eq(0)");

猜你喜欢