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 相关文章推荐
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
javascript继承机制实例详解
Nov 20 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 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
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
深入浅出php socket编程
2015/05/13 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
vue实现微信分享功能
2018/11/28 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python实现日志按天分割
2019/07/22 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
网络安全方面的面试题
2016/01/07 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
捐书寄语赠言
2014/01/18 职场文书
庆六一宣传标语
2014/10/08 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
入团申请书格式
2019/06/20 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android