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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
vue项目接口域名动态获取操作
Aug 13 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数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
php header函数的常用http头设置
2015/06/25 PHP
php实现递归的三种基本方式
2020/07/04 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
对比分析json及XML
2014/11/28 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python requests使用socks5的例子
2019/07/25 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
Python求解正态分布置信区间教程
2019/11/20 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python实现仿射密码的思路详解
2020/04/23 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
JSF的标签库有哪些
2012/04/27 面试题
元旦活动感言
2014/03/08 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
社区科普工作方案
2014/06/03 职场文书
信息员培训方案
2014/06/12 职场文书