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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
js date 格式化
Feb 15 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 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
在Debian系统下配置LNMP的教程
2015/07/09 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
python3实现ftp服务功能(客户端)
2017/03/24 Python
基于Python闭包及其作用域详解
2017/08/28 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
员工自我鉴定
2013/10/09 职场文书
工程专业应届生求职信
2014/02/19 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
员工培训协议书
2014/09/15 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
入伍通知书
2015/04/23 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
工作简报格式范文
2015/07/21 职场文书