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系列(16) 闭包(Closures)
Apr 12 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
js微信分享实现代码
Oct 11 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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中常用编辑器推荐
2007/01/02 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
浅谈Python 参数与变量
2020/06/20 Python
增大python字体的方法步骤
2020/07/05 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
求职者怎样写自荐信
2014/04/13 职场文书
发票退票证明
2015/06/24 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android