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 动画基础教程
Dec 25 Javascript
jquery cookie的用法总结
Nov 18 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 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
apache php模块整合操作指南
2012/11/16 PHP
PHP数据类型的总结分析
2013/06/13 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现堆排序的方法详解
2016/05/03 Python
Python探索之创建二叉树
2017/10/25 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python3.7 的新特性详解
2019/07/25 Python
浅谈Python 参数与变量
2020/06/20 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
关于建议书的格式范文
2014/05/20 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
Redis中一个String类型引发的惨案
2021/07/25 Redis
Python实现照片卡通化
2021/12/06 Python
如何利用golang运用mysql数据库
2022/03/13 Golang