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 可以拖动的DIV(二)
Jun 26 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
小程序实现图片预览裁剪插件
Nov 22 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摘要生成函数(无乱码)
2012/02/04 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python入门学习指南分享
2018/04/11 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
以太网Ethernet IEEE802.3
2013/08/05 面试题
青年岗位能手事迹材料
2014/12/23 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js