jquery 元素控制(追加元素/追加內(nèi)容)介紹及應(yīng)用
更新時(shí)間：2013年04月21日 16:14:52 作者：
一、在元素內(nèi)部/外部追加元素二、在元素的不同位置追加內(nèi)容三、在元素的開始位置追加內(nèi)容四、在不同元素的開始位置追加內(nèi)容等等，感興趣的朋友可以參考下哈
一、在元素內(nèi)部/外部追加元素
append,prepend:添加到子元素
before，after：作為兄弟元素添加
html：
<div id="content">
<p>在我的后面追加一條新聞</p>
</div>
Javascript:
<script type="text/javascript">
jQuery(function(){
//在元素內(nèi)部追加內(nèi)容
$("#content").append("<p>姚明退役了...</p>");
})
</script>
在#content里面添加元素，這是把<p>姚明退役了...</p>作為子元素添加到#content，如果想在元素外部追加元素，需要用到after，這樣的話就可以把<p>姚明退役了...</p>作為兄弟元素追加到#content后面
<script type="text/javascript">
jQuery(function(){
//將span添加到追加到content1的后面
$("#content").after("<p>姚明退役了...</p>");
})
</script>
二、在元素的不同位置追加內(nèi)容
html
<div id="content1" style="border:1px solid red">
<p>窗前明月光</p>
</div>
<span>疑是地上霜</span>
javascript
<script type="text/javascript">
jQuery(function(){
//將span添加到追加到content1的后面
$("span").appendTo("#content1");
})
</script>
三、在元素的開始位置追加內(nèi)容
html
<div>
<div id="content">
<p>在我的后面追加一條新聞</p>
</div>
javascript
<script type="text/javascript">
jQuery(function(){
//在元素的開始位置追加內(nèi)容
$("#content").prepend("<p>頭部</p>");
})
</script>
四、在不同元素的開始位置追加內(nèi)容
html
<div id="content">
<p>在我的后面追加一條新聞</p>
</div>
<span>疑是地上霜</span>
javascript
<script type="text/javascript">
jQuery(function(){
//在不同元素的開始位置追加內(nèi)容
$("span").prependTo("#content");
})
</script>
在#content里面添加元素，這是把<span>疑是地上霜</span>作為子元素添加到#content開始地方，如果想在元素外部添加開始元素，需要用到before，這樣的話就可以把<span>疑是地上霜</span>作為兄弟元素追加到#content開始了
<script type="text/javascript">
jQuery(function(){
//在不同元素的開始位置追加內(nèi)容
$("span").before("#content");
})
</script>
五、用指定結(jié)構(gòu)的元素包含元素
Warp(html)
在指定的html中指定html元素，但指定的元素中不可含有兄弟元素，否則不能正常的運(yùn)行，并且不含有一般文本字符串，下面的代碼用div標(biāo)簽包含p標(biāo)簽
html
<form id="form1" runat="server">
<span>將我包含在div中</span>
</form>
javascript
<script type="text/javascript">
jQuery(function(){
$("span").wrap("<b></b>");
})
</script>
六、用指定的元素包含多個(gè)html元素
warpAll(html)
html
<form id="form1" runat="server">
<p>p內(nèi)容</p>
<p>p內(nèi)容</p>
<p>p內(nèi)容</p>
<p>p內(nèi)容</p>
<p>p內(nèi)容</p>
</form>
javascript
<script type="text/javascript">
jQuery(function(){
$("p").wrapAll("<div style='border:1px solid red'><p></p></div>");
})
</script>
七、用指定的標(biāo)簽包含子元素
wrapInner(html)
與warp方法一樣，在html中指定html元素，例如：
用b標(biāo)簽包含p標(biāo)簽中文字的代碼如下：
html代碼
<p>將p標(biāo)簽的文字用b標(biāo)簽包含起來</p>
<p>也將p標(biāo)簽的文字用b標(biāo)簽包含起來</p>
javascript
<script type="text/javascript">
jQuery(function(){
$("p").wrapInner("<b></b>");
})
</script>
append,prepend:添加到子元素
before，after：作為兄弟元素添加
html：
復(fù)制代碼 代碼如下:
<div id="content">
<p>在我的后面追加一條新聞</p>
</div>
Javascript:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery(function(){
//在元素內(nèi)部追加內(nèi)容
$("#content").append("<p>姚明退役了...</p>");
})
</script>
在#content里面添加元素，這是把<p>姚明退役了...</p>作為子元素添加到#content，如果想在元素外部追加元素，需要用到after，這樣的話就可以把<p>姚明退役了...</p>作為兄弟元素追加到#content后面
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery(function(){
//將span添加到追加到content1的后面
$("#content").after("<p>姚明退役了...</p>");
})
</script>
二、在元素的不同位置追加內(nèi)容
html
復(fù)制代碼 代碼如下:
<div id="content1" style="border:1px solid red">
<p>窗前明月光</p>
</div>
<span>疑是地上霜</span>
javascript
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery(function(){
//將span添加到追加到content1的后面
$("span").appendTo("#content1");
})
</script>
三、在元素的開始位置追加內(nèi)容
html
復(fù)制代碼 代碼如下:
<div>
<div id="content">
<p>在我的后面追加一條新聞</p>
</div>
javascript
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery(function(){
//在元素的開始位置追加內(nèi)容
$("#content").prepend("<p>頭部</p>");
})
</script>
四、在不同元素的開始位置追加內(nèi)容
html
復(fù)制代碼 代碼如下:
<div id="content">
<p>在我的后面追加一條新聞</p>
</div>
<span>疑是地上霜</span>
javascript
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery(function(){
//在不同元素的開始位置追加內(nèi)容
$("span").prependTo("#content");
})
</script>
在#content里面添加元素，這是把<span>疑是地上霜</span>作為子元素添加到#content開始地方，如果想在元素外部添加開始元素，需要用到before，這樣的話就可以把<span>疑是地上霜</span>作為兄弟元素追加到#content開始了
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery(function(){
//在不同元素的開始位置追加內(nèi)容
$("span").before("#content");
})
</script>
五、用指定結(jié)構(gòu)的元素包含元素
Warp(html)
在指定的html中指定html元素，但指定的元素中不可含有兄弟元素，否則不能正常的運(yùn)行，并且不含有一般文本字符串，下面的代碼用div標(biāo)簽包含p標(biāo)簽
html
復(fù)制代碼 代碼如下:
<form id="form1" runat="server">
<span>將我包含在div中</span>
</form>
javascript
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery(function(){
$("span").wrap("<b></b>");
})
</script>
六、用指定的元素包含多個(gè)html元素
warpAll(html)
html
復(fù)制代碼 代碼如下:
<form id="form1" runat="server">
<p>p內(nèi)容</p>
<p>p內(nèi)容</p>
<p>p內(nèi)容</p>
<p>p內(nèi)容</p>
<p>p內(nèi)容</p>
</form>
javascript
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jQuery(function(){
$("p").wrapAll("<div style='border:1px solid red'><p></p></div>");
})
</script>
七、用指定的標(biāo)簽包含子元素
wrapInner(html)
與warp方法一樣，在html中指定html元素，例如：
用b標(biāo)簽包含p標(biāo)簽中文字的代碼如下：
html代碼
<p>將p標(biāo)簽的文字用b標(biāo)簽包含起來</p>
<p>也將p標(biāo)簽的文字用b標(biāo)簽包含起來</p>
復(fù)制代碼 代碼如下:
javascript
<script type="text/javascript">
jQuery(function(){
$("p").wrapInner("<b></b>");
})
</script>
您可能感興趣的文章:
- jQuery 追加元素的方法如append、prepend、before
- jquery?追加元素append、prepend、before、after用法與區(qū)別分析
- Jquery元素追加和刪除的實(shí)現(xiàn)方法
- jQuery動態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法
- jquery 操作日期、星期、元素的追加的實(shí)現(xiàn)代碼
- JQuery實(shí)現(xiàn)樣式設(shè)置、追加、移除與切換的方法
- jquery 追加tr和刪除tr示例代碼
- 利用jquery如何從json中讀取數(shù)據(jù)追加到html中
- jQuery實(shí)現(xiàn)合并/追加數(shù)組并去除重復(fù)項(xiàng)的方法
- js和jquery對dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
- jQuery為DOM動態(tài)追加事件的方法
- jQuery操作元素追加內(nèi)容示例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
jquery+CSS實(shí)現(xiàn)的水平布局多級網(wǎng)頁菜單效果
這篇文章主要介紹了jquery+CSS實(shí)現(xiàn)的水平布局多級網(wǎng)頁菜單效果,涉及jquery頁面元素屬性動態(tài)變換效果實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
formvalidator驗(yàn)證插件中有關(guān)ajax驗(yàn)證問題
jquery formvalidator插件是不錯的國產(chǎn)驗(yàn)證插件了，做點(diǎn)普通的校驗(yàn)也是很方便的，但最近遇到個(gè)問題，發(fā)現(xiàn)如果表單整個(gè)表單是AJAX提交時(shí)，就不能按傳統(tǒng)的做法了2013-01-01
jQuery+CSS 實(shí)現(xiàn)隨滾動條增減的汽水瓶中的液體效果
一個(gè)很有意思的網(wǎng)站，那個(gè)網(wǎng)站是一家德國汽水公司的網(wǎng)站（德文神馬的），網(wǎng)站首頁有一個(gè)汽水瓶，汽水瓶里的水會隨著我們向下拉滾動條而減少。2011-09-09
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-04-04
JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案
今天小編就為大家分享一篇關(guān)于JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-12-12
這篇文章主要介紹了jquery制作屬于自己的select自定義樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果
這篇文章主要介紹了JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果,涉及jQuery結(jié)合時(shí)間函數(shù)動態(tài)修改按鈕屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12
jQuery側(cè)邊欄隨窗口滾動實(shí)現(xiàn)方法
jQuery側(cè)邊欄隨窗口滾動實(shí)現(xiàn)方法，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了jQuery的文檔處理程序,結(jié)合實(shí)例形式詳細(xì)分析了jQuery文檔處理程序的概念、原理、使用方法與相關(guān)注意事項(xiàng),并詳細(xì)講述了文檔處理程序的優(yōu)勢,需要的朋友可以參考下2016-05-05