jQuery创建DOM元素实例解析


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery创建DOM元素的使用技巧。分享给大家供大家参考。具体分析如下:

利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。

而jQuery使用$就可以直接创建DOM元素

var oNewP = $("<p>使用jQuery创建的内容</p>");

以上代码等同于javascript
var oNewP2 = document.createElement("p");

var oText = document.createTextNode("这是使用javascript方法创建的内容");

oNewP2.appendChild(oText);

例:使用jQuery创建DOM
<script type="text/javascript">

$(function(){

    var oNewP = $("<p>使用jQuery创建的内容</p>");

    oNewP.insertAfter("#display");     //insertAfter方法

})
</script>

<div id="display"></div>

使用jQuery大大缩短了代码长度。节省了编写时间。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
几种tab切换详解
Feb 03 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery使用之处理页面元素用法实例
Jan 19 #Javascript
jQuery学习笔记之jQuery中的$
Jan 19 #Javascript
jQuery使用之设置元素样式用法实例
Jan 19 #Javascript
jQuery学习笔记之基础中的基础
Jan 19 #Javascript
jQuery 选择器详解
Jan 19 #Javascript
jQuery使用之标记元素属性用法实例
Jan 19 #Javascript
jQuery应用之jQuery链用法实例
Jan 19 #Javascript
You might like
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php截取中文字符串函数实例
2015/02/23 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python正则表达式常用函数总结
2017/06/24 Python
python构建指数平滑预测模型示例
2019/11/21 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
电脑销售顾问自荐信
2014/01/29 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
电大本科自我鉴定
2014/02/05 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
白鹤梁导游词
2015/02/06 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
create-react-app开发常用配置教程
2022/06/25 Javascript