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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 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
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
Smarty模板语法详解
2019/07/20 PHP
srcElement表格样式
2006/09/03 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
javascript实现简易计算器的代码
2016/05/31 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
社团文化节邀请函
2014/01/10 职场文书
房产电话营销开场白
2015/05/29 职场文书
工资证明格式模板
2015/06/12 职场文书
羊脂球读书笔记
2015/06/30 职场文书
2016春节放假通知范文
2015/08/18 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis