快捷導(dǎo)航

jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法

更新時(shí)間：2015年03月26日 16:01:45 作者：上大王

這篇文章主要介紹了jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法,實(shí)例分析了jQuery中append追加內(nèi)容的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法。分享給大家供大家參考。具體分析如下：

下面的代碼可以同時(shí)在文本段落后添加多項(xiàng)內(nèi)容

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
function appendText()
{
var txt1="<p>Text.</p>"; // Create text with HTML
var txt2=$("<p></p>").text("Text."); // Create text with jQuery
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // Create text with DOM
$("body").append(txt1,txt2,txt3); // Append new elements
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button onclick="appendText()">Append text</button>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

提高jQuery性能的十個(gè)訣竅
下面小編就為大家分享一篇提高jQuery性能的十個(gè)訣竅。很實(shí)用的。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
JQuery自動(dòng)觸發(fā)事件的方法
這篇文章主要介紹了JQuery自動(dòng)觸發(fā)事件的方法,涉及trigger()方法完成模擬操作的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
jquery封裝的對(duì)話(huà)框簡(jiǎn)單實(shí)現(xiàn)
本文為大家詳細(xì)介紹下使用jquery簡(jiǎn)單實(shí)現(xiàn)封裝的對(duì)話(huà)框，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
jQueryUI如何自定義組件實(shí)現(xiàn)代碼
第一次自定義jQueryUI Widget 又是第一次，現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。
2010-11-11
jQuery的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇jQuery的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
jquery ui對(duì)話(huà)框?qū)嵗a
在網(wǎng)頁(yè)設(shè)計(jì)中，不論是為了減少于由于頁(yè)面跳轉(zhuǎn)而帶來(lái)的不友好用戶(hù)體驗(yàn)，還是為了維持桌面應(yīng)用程序的使用習(xí)慣，對(duì)話(huà)框的設(shè)計(jì)都是不可或缺的。
2013-05-05
jQuery彈層插件jquery.fancybox.js用法實(shí)例
這篇文章主要介紹了jQuery彈層插件jquery.fancybox.js用法,結(jié)合實(shí)例形式分析了jQuery彈出層插件jquery.fancybox.js的功能、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-01-01
jQuery多個(gè)版本和其他js庫(kù)沖突的解決方法
jQuery多個(gè)版本或和其他js庫(kù)沖突主要是常用的$符號(hào)的問(wèn)題，該怎么解決呢？下面小編給大家?guī)?lái)了jQuery多個(gè)版本和其他js庫(kù)沖突的解決方法，一起看下吧
2016-08-08
jquery 緩存問(wèn)題的幾個(gè)解決方法
在IE瀏覽器下，一般的ajax的方法都是cache等于true的，下面有幾個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下
2013-11-11
一款jquery特效編寫(xiě)的大度寬屏焦點(diǎn)圖切換特效的實(shí)例代碼
焦點(diǎn)圖顯示區(qū)域有固定的寬度,當(dāng)前顯示寬度之外是一個(gè)半透明層顯示的其它的焦點(diǎn)圖片，最好的是，此特效兼容ie6以及其它瀏覽器。
2013-08-08