jQuery学习笔记之创建DOM元素


Posted in Javascript onJanuary 19, 2015

利用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大大缩短了代码长度。节省了编写时间。希望本文能给小伙伴们一些提示,有疑问请给我留言。

Javascript 相关文章推荐
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
jQuery学习笔记之2个小技巧
Jan 19 #Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 #Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 #Javascript
jQuery创建DOM元素实例解析
Jan 19 #Javascript
jQuery使用之处理页面元素用法实例
Jan 19 #Javascript
jQuery学习笔记之jQuery中的$
Jan 19 #Javascript
jQuery使用之设置元素样式用法实例
Jan 19 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
Javascript 布尔型分析
2008/12/22 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python3简单实现微信爬虫
2015/04/09 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
用python对oracle进行简单性能测试
2020/12/05 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
自我评价格式
2014/01/06 职场文书
幼儿教育感言
2014/02/05 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
阿里云日志过滤器配置日志服务
2022/04/09 Servers