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 相关文章推荐
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
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数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
PHP文件操作实例总结
2016/09/27 PHP
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
JS实现小米轮播图
2020/09/21 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python sys.path详细介绍
2013/10/17 Python
python根据路径导入模块的方法
2014/09/30 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
Python常用数据分析模块原理解析
2020/07/20 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
如何客观的进行自我评价
2013/12/17 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
义和团口号
2014/06/17 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
Python装饰器的练习题
2021/11/23 Python
Java存储没有重复元素的数组
2022/04/29 Java/Android
python计算列表元素与乘积详情
2022/08/05 Python