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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
20个最新的jQuery插件
Jan 13 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
vux-scroller实现移动端上拉加载功能过程解析
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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python socket聊天脚本代码实例
2020/01/02 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
爱游人:Travelliker
2017/09/05 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
教师自我评价范文
2013/12/16 职场文书
五一服装活动方案
2014/01/11 职场文书
大学班长的职责
2014/01/27 职场文书
学习决心书范文
2014/03/11 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
介绍信范文
2015/01/31 职场文书
情况说明书怎么写
2015/10/08 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python