jQuery中replaceWith()方法用法實(shí)例
本文實(shí)例講述了jQuery中replaceWith()方法用法。分享給大家供大家參考。具體分析如下:
此方法將所有匹配的元素替換成指定的HTML或DOM元素。
需要注意的是此方法是追加內(nèi)容,也就是原來的內(nèi)容還在。
特別說明:
HTML內(nèi)容就是內(nèi)容中可以包含HTML標(biāo)簽,并且能夠被瀏覽器渲染。
文本內(nèi)容是先將內(nèi)容中的HTML預(yù)定義字符轉(zhuǎn)換成html字符實(shí)體,這樣HTML標(biāo)簽就不會(huì)被渲染。
語法結(jié)構(gòu):
參數(shù)列表:
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
div{
width:100px;
height:100px;
border:1px solid blue;
}
p{
width:150px;
height:150px;
border:1px solid red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").replaceWith("<div>我是div元素</div>");
});
});
</script>
</head>
<body>
<p>我是p元素</p>
<p>我是p元素</p>
<p>我是p元素</p>
<button>用div包裹每個(gè)段落</button>
</body>
</html>
以上代碼可以可以將p元素替換為div元素。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQueryUI Sortable 應(yīng)用Demo(分享)
下面小編就為大家?guī)硪黄猨QueryUI Sortable 應(yīng)用Demo(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09jQuery學(xué)習(xí)筆記[1] jQuery中的DOM操作
jQuery中的DOM操作實(shí)現(xiàn)說明,學(xué)習(xí)DOM操作的朋友可以參考下。2010-12-12jquery 簡單的進(jìn)度條實(shí)現(xiàn)代碼
jquery其實(shí)是有個(gè)進(jìn)度條插件的,叫做jqueryprogressbar.js,可是想練習(xí)一下,就沒有用,自己寫了點(diǎn)代碼。這個(gè)代碼其實(shí)是參考別人的,因?yàn)樽约旱腏S基礎(chǔ)不是很好。2010-03-03jQuery仿Excel表格編輯功能的實(shí)現(xiàn)代碼
Handsontable 是一個(gè)相當(dāng)給力的 jQuery 插件,它實(shí)現(xiàn)了 HTML 頁面中的表格編輯功能,并且是仿 Excel 的編輯效果。2013-05-05jQuery實(shí)現(xiàn)回車鍵(Enter)切換文本框焦點(diǎn)的代碼實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)回車鍵(Enter)切換文本框焦點(diǎn)的代碼實(shí)例,需要的朋友可以參考下2014-05-05jQuery實(shí)現(xiàn)側(cè)邊導(dǎo)航欄及滑動(dòng)電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實(shí)現(xiàn)側(cè)邊導(dǎo)航欄以及滑動(dòng)電梯效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手試一試2022-03-03