<script type="text/javascript">
//<![CDATA[
$(function(){
 $("#btn_1").click(function(){
  $(".nm_p").replaceWith('<p class="nm_p">歡迎訪問(wèn)chabaoo.cn</p>'); 
 })
 $("#btn_2").click(function(){
  $(".nm_p").replaceWith('<p class="nm_p" title="歡迎訪問(wèn)腳本之家" >歡迎訪問(wèn)腳本之家</p>'); 
  // 同樣的實(shí)現(xiàn)： $('<p class="nm_p">歡迎訪問(wèn)chabaoo.cn</p>').replaceAll(".nm_p"); 
 })
});
//]]>
</script>

也可以使用JQuery中另一個(gè)方法replaceAll()來(lái)實(shí)現(xiàn)，該方法與replaceWith()方法的作用相同，只是顛倒了replaceWith()操作，可以使用如下jQuery代碼實(shí)現(xiàn)同樣的功能：

復(fù)制代碼代碼如下:

$('<p class="nm_p">歡迎訪問(wèn)chabaoo.cn</p>').replaceAll(".nm_p");

這兩句JQuery代碼都會(huì)實(shí)現(xiàn)節(jié)點(diǎn)替換效果。

PS：如果在替換之前，已經(jīng)為元素綁定事件，替換后原先綁定的事件將會(huì)與被替換的元素一起消失，需要在新元素上重新綁定事件。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

JQuery
DOM

相關(guān)文章

jQuery實(shí)現(xiàn)簡(jiǎn)單漂亮的Nav導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單漂亮的Nav導(dǎo)航菜單效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷與操作頁(yè)面元素屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
jquery實(shí)現(xiàn)選項(xiàng)卡切換代碼實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)選項(xiàng)卡切換，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
jQuery simpleModal插件的使用介紹
SimpleModal是一個(gè)輕量級(jí)的jQuery插件，它提供了一個(gè)模式對(duì)話框發(fā)展強(qiáng)大的接口。這篇文章主要介紹了jQuery simpleModal插件的使用，非常不錯(cuò)，具有參考借鑒價(jià)值，對(duì)jquery simplemodal相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
JQGrid的用法解析(列編輯,添加行,刪除行)
本文是對(duì)JQGrid的用法--列編輯,添加行,刪除行。進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
用JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法
本篇文章主要是對(duì)JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery選擇器的工作原理和優(yōu)化分析
至于有那些選擇器，在幫助手冊(cè)中都有，自己去看，這篇主要是分析他的工作原理，而優(yōu)化我們寫(xiě) 的選擇器，尤其在頁(yè)面內(nèi)容很多的情況下，更應(yīng)該需要優(yōu)化。下邊就言歸正傳。
2011-07-07
jquery獲取當(dāng)前點(diǎn)擊的元素的五種方法介紹
我們可以使用$(this)方法獲取事件處理函數(shù)內(nèi)部的當(dāng)前元素,也可以使用e.target方法在外部獲取當(dāng)前元素,此外,我們還介紹了parent()方法和find()方法獲取當(dāng)前元素的父元素或子元素,以及closest()方法獲取當(dāng)前元素最近的祖先元素
2023-08-08
jQuery代碼優(yōu)化選擇符篇
毫無(wú)疑問(wèn)，jQuery的獨(dú)到之處就是它以集合為中心的操作。為了取得DOM對(duì)象集合，jQuery利用JavaScript不僅實(shí)現(xiàn)了（它誕生時(shí)）很多瀏覽器不支持的CSS選擇符，還實(shí)現(xiàn)了不少獨(dú)到的自定義選擇符，為在文檔中查找元素提供了極大的便利
2011-11-11
jQuery實(shí)現(xiàn)選項(xiàng)卡嵌套效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)選項(xiàng)卡嵌套效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
jQuery實(shí)現(xiàn)的個(gè)性化返回底部與返回頂部特效代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的個(gè)性化返回底部與返回頂部特效代碼,涉及jQuery結(jié)合動(dòng)畫(huà)函數(shù)響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10