jQuery使用append在html元素后同时添加多项内容的方法


Posted in Javascript onMarch 26, 2015

本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法。分享给大家供大家参考。具体分析如下:

下面的代码可以同时在文本段落后添加多项内容

<!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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
js实现随机点名器精简版
Jun 29 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 #Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 #Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 #Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 #Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 #Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 #Javascript
Js实现自定义右键行为
Mar 26 #Javascript
You might like
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
什么是抽象
2015/12/13 面试题
财会自我鉴定范文
2013/12/27 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
MySQL数据迁移相关总结
2021/04/29 MySQL