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 定义新对象方法
Feb 20 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
js创建元素(节点)示例
2014/01/02 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python文件比较示例分享
2014/01/10 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
Django values()和value_list()的使用
2020/03/31 Python
深入了解python列表(LIST)
2020/06/08 Python
python时间time模块处理大全
2020/10/25 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
一篇.NET面试题
2014/09/29 面试题
日语专业个人的求职信
2013/12/03 职场文书
学校联谊活动方案
2014/02/15 职场文书
意向协议书范本
2014/04/23 职场文书
优秀语文教师事迹
2014/05/18 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技