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 相关文章推荐
几款极品的javascript压缩混淆工具
May 16 Javascript
asp批量修改记录的代码
Jun 25 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
jQuery聚合函数实例
May 21 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP 翻页 实例代码
2009/08/07 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
php格式文件打开的四种方法
2018/02/24 PHP
javascript 简练的几个函数
2009/08/29 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Python with语句用法原理详解
2020/07/03 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
大学课外活动总结
2014/07/09 职场文书
法人授权委托书
2014/09/16 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技