刪除與替換元素
作者：曾慶林
刪除元素
以下方法可以從文檔中刪除指定的DOM元素夫椭，或從指定元素中刪除所有子節(jié)點顿颅。
- remove()方法
- empty()方法
remove（）案例
html
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
js
$(function(){
$("button").click(function(){
$("p:eq(0)").remove();
})
})
單擊按鈕執(zhí)行后的結(jié)果
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
第一個p元素會被刪除
empty（）案例
html
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
js
$(function(){
$("button").click(function(){
$("p:eq(0)").empty();
})
})
單擊按鈕執(zhí)行后的結(jié)果
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<p></p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
第一個p元素內(nèi)容會被清空
替換元素
以下方法用來對DOM元素執(zhí)行替換操作卿啡，即以新建元素或現(xiàn)有元素替換指定的目標元素。
- replaceWith()方法
- replaceAll()方法
replaceWith()案例
html
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
js
$(function(){
$("button").click(function(){
$("p").replaceWith("<a>this is a </a>");
})
})
單擊按鈕執(zhí)行后的結(jié)果
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<a>this is a </a>
<a>this is a </a>
<a>this is a </a>
<a>this is a </a>
<a>this is a </a>
所有的的p元素都會替換為a元素
replaceAll()案例
html
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
js
$(function(){
$("button").click(function(){
$("<div>到碗里來</div>").replaceAll($("p"));
})
})
單擊按鈕執(zhí)行后的結(jié)果
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<div>到碗里來</div>
<div>到碗里來</div>
<div>到碗里來</div>
<div>到碗里來</div>
<div>到碗里來</div>
所有的的p元素都會替換為a元素
復(fù)制元素
clone() 復(fù)制元素
clone(true) 復(fù)制元素并復(fù)制元素綁定的事件
clone() 案例
html
<button>按鈕</button>
js
$(function(){
$("button").click(function(){
var btn=$(this).clone(true);
//true 還會復(fù)制事件
btn.insertAfter($(this));
})
})
單擊任意按鈕執(zhí)行后的結(jié)果
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
...
所有的的p元素都會替換為a元素
