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 相关文章推荐
jQuery阻止同类型事件小结
Apr 19 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
JavaScript函数模式详解
Nov 07 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 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
无线电广播的开始
2002/01/30 无线电
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python实现三次样条插值
2018/12/17 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
售后主管岗位职责
2013/12/08 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
植树节活动总结
2014/04/30 职场文书
网络舆情信息简报
2015/07/21 职场文书
学生会任命书范本
2015/09/21 职场文书
情况说明书怎么写
2015/10/08 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Java实现多文件上传功能
2021/06/30 Java/Android