jQuery创建DOM元素实例解析


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery创建DOM元素的使用技巧。分享给大家供大家参考。具体分析如下:

利用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大大缩短了代码长度。节省了编写时间。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
js实现漫天星星效果
Jan 19 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
jQuery使用之处理页面元素用法实例
Jan 19 #Javascript
jQuery学习笔记之jQuery中的$
Jan 19 #Javascript
jQuery使用之设置元素样式用法实例
Jan 19 #Javascript
jQuery学习笔记之基础中的基础
Jan 19 #Javascript
jQuery 选择器详解
Jan 19 #Javascript
jQuery使用之标记元素属性用法实例
Jan 19 #Javascript
jQuery应用之jQuery链用法实例
Jan 19 #Javascript
You might like
PHP 处理图片的类实现代码
2009/10/23 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python实现Const详解
2015/01/27 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Python numpy 常用函数总结
2017/12/07 Python
Python autoescape标签用法解析
2020/01/17 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
应聘自荐书
2013/10/08 职场文书
2014年元旦感言
2014/03/06 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
保护环境的标语
2014/06/09 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
学会感恩主题班会
2015/08/12 职场文书
python实现学员管理系统(面向对象版)
2022/06/05 Python
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang