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 load Page,load css,load js实现代码
Mar 31 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
实现无刷新联动例子汇总
May 20 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 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代码简化
2010/02/08 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
《王二小》教学反思
2014/02/27 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
安全生产承诺书
2014/03/26 职场文书
学习雷锋标语
2014/06/25 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript