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,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
python+mysql实现教务管理系统
2019/02/20 Python
python+pyqt5编写md5生成器
2019/03/18 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python 实现矩阵按对角线打印
2019/11/29 Python
pygame实现飞机大战
2020/03/11 Python
python实现同一局域网下传输图片
2020/03/20 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
python集合能干吗
2020/07/19 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
《胖乎乎的小手》教学反思
2014/02/26 职场文书
广告词串烧
2014/03/19 职场文书
买房协议书
2014/04/11 职场文书
教师批评与自我批评
2014/10/15 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
祝寿主持词
2015/07/02 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
结婚主持人致辞
2015/07/28 职场文书
深入理解python多线程编程
2021/04/18 Python