JQuery替換DOM節(jié)點的方法
更新時間：2015年06月11日 10:13:59 作者：簡明現代魔法
這篇文章主要介紹了JQuery替換DOM節(jié)點的方法,實例分析了jQuery中replaceWith()和replaceAll()方法的相關使用技巧與注意事項,需要的朋友可以參考下
本文實例講述了JQuery替換DOM節(jié)點的方法。分享給大家供大家參考。具體分析如下：
如果要替換某個節(jié)點，jQuery提供了相應的方法，即replaceWith()和replaceAll()。
replaceWith()方法的作用是將所有匹配的元素都替換成指定的HTML或者DOM元素。
本例 JQuery 代碼：
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#btn_1").click(function(){
$(".nm_p").replaceWith('<p class="nm_p">歡迎訪問www.fzitv.net</p>');
})
$("#btn_2").click(function(){
$(".nm_p").replaceWith('<p class="nm_p" title="歡迎訪問腳本之家" >歡迎訪問腳本之家</p>');
// 同樣的實現： $('<p class="nm_p">歡迎訪問www.fzitv.net</p>').replaceAll(".nm_p");
})
});
//]]>
</script>
也可以使用JQuery中另一個方法replaceAll()來實現，該方法與replaceWith()方法的作用相同，只是顛倒了replaceWith()操作，可以使用如下jQuery代碼實現同樣的功能：
復制代碼 代碼如下:
$('<p class="nm_p">歡迎訪問www.fzitv.net</p>').replaceAll(".nm_p");
這兩句JQuery代碼都會實現節(jié)點替換效果。
PS：如果在替換之前，已經為元素綁定事件，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
這篇文章主要介紹了jquery實現頁面百葉窗走馬燈式翻滾顯示效果的方法,實例分析了jQuery操作百葉窗翻滾效果的實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop
這篇文章主要介紹了jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop，感興趣的小伙伴們可以參考一下2015-12-12
下面小編就為大家?guī)硪黄獪\談jQuery綁定事件會疊加的解決方法和心得總結。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
開發(fā)一個jQuery插件實現多級聯(lián)動菜單效果，實現步驟很詳細，感興趣的小伙伴們可以參考一下2015-12-12
jQuery 移動端拖拽（模塊化開發(fā)，觸摸事件，webpack）
這篇文章主要介紹了jQuery 移動端拖拽（模塊化開發(fā)，觸摸事件，webpack）的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細介紹了jQuery開發(fā)之內容滑動切換效果的相關資料，jquery.hwSlide.js插件進行封裝具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
網站開發(fā)的項目中使用Google CDN的jQuery庫雖然加載速度很快,但調用本地服務器的庫才可以確保萬無一失,接下來介紹載入jQuery庫的最佳方法,感興趣的朋友可以研究下2012-12-12
一個分享按鈕的插件使用介紹（可擴展，內附開發(fā)制作流程）
前幾天由于工作需要制作一個分享按鈕，考慮到后續(xù)其他項目可能也會用到，于是就打算寫成插件化2011-09-09
使用ajax+jqtransform實現動態(tài)加載select
本文給大家介紹了使用ajax+jqtransform實現動態(tài)加載select，效果非常的不錯，這里推薦給大家，有需要的小伙伴直接拿走使用。2014-12-12
Jquery 一次處理多個ajax請求的代碼，需要的朋友可以參考下。2011-09-09