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代码
Mar 10 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
node.js中 stream使用教程
Aug 28 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
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
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
PHP无限分类的类
2007/01/02 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php返回json数据函数实例
2014/10/09 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php微信公众号开发之简答题
2018/10/20 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python实现调度算法代码详解
2017/12/01 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Python如何给函数库增加日志功能
2020/08/04 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
幼儿园大班毕业教师寄语
2014/04/03 职场文书
最美护士演讲稿
2014/08/27 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
正规借条模板
2015/05/26 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
create-react-app开发常用配置教程
2022/06/25 Javascript