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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 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/22 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
调整PHP的性能
2013/10/30 PHP
浅谈php和.net的区别
2014/09/28 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
python 数据的清理行为实例详解
2017/07/12 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python实现图片插入文字
2019/11/26 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
药剂专业学生求职信范文
2013/12/28 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
Vue h函数的使用详解
2022/02/18 Vue.js