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捕获鼠标滚轮事件代码
Dec 16 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
vue路由跳转传参数的方法
May 06 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/06/14 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python如何设置静态变量
2020/09/07 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
最新自我评价范文
2013/11/16 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
个人现实表现材料
2014/02/04 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL