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 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
原生JavaScript实现购物车
Jan 10 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
我的论坛源代码(八)
2006/10/09 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
JavaScript静态的动态
2006/09/18 Javascript
javascript[js]获取url参数的代码
2007/10/17 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
React 父子组件通信的实现方法
2019/12/05 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
大学军训感言
2014/01/10 职场文书
护士自我介绍信
2014/01/13 职场文书
通用自荐信范文
2014/03/14 职场文书
项目建议书范文
2014/05/12 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
三八节活动主持词
2015/07/04 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
工作简历的自我评价
2019/05/16 职场文书