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的数据类型检测
Jul 10 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python 实现超级玛丽游戏
2020/11/25 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
PHP面试题-$message和$$message的区别
2015/12/08 面试题
java程序员面试交流
2012/11/29 面试题
个人简历自我评价八例
2013/10/31 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
电教室标语
2014/06/20 职场文书
音乐教师求职信范文
2015/03/20 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书