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与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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
2006/12/14 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
Javascript 二维数组
2009/11/26 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
入股协议书
2014/04/14 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
民间借贷协议书范本
2014/10/01 职场文书
个人更名证明
2015/06/23 职场文书