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 相关文章推荐
javascript 写的一个简单的timer
Jul 30 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
原生JS实现飞机大战小游戏
Jun 09 Javascript
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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
机器学习python实战之决策树
2017/11/01 Python
python中requests和https使用简单示例
2018/01/18 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
个人自我评价范文
2014/02/05 职场文书
财务主管岗位职责
2014/02/28 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
横幅标语大全
2014/06/17 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
党员个人承诺书
2015/04/27 职场文书
关于五一放假的通知
2015/08/18 职场文书
导游词之吉林花园山
2019/10/17 职场文书