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中last()方法用法实例
Jan 06 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 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之第九天
2006/10/09 PHP
php下MYSQL limit的优化
2008/01/10 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
PHP 转义使用详解
2013/07/15 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python获取Linux发行版名称
2019/08/30 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
如何用Python徒手写线性回归
2021/01/25 Python
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
如何执行一个shell程序
2012/11/23 面试题
文科毕业生自荐书范文
2014/04/17 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers