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 QueryString解析类代码
Jan 17 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
vue中如何使用ztree
Feb 06 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
js实现html滑动图片拼图验证
Jun 24 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
怎么使 Mysql 数据同步
2006/10/09 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python 私有函数的实例详解
2017/09/11 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
python新手学习使用库
2020/06/11 Python
Python中qutip用法示例详解
2020/10/02 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
三年大学自我鉴定
2014/01/16 职场文书
简历自我评价模版
2014/01/31 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
职工年度考核评语
2014/12/31 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL