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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
DOM事件探秘篇
Feb 15 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
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
中国的第一台收音机
2021/03/01 无线电
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python flask 多对多表查询功能
2017/06/25 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
浅谈Python中的模块
2020/06/10 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
读书活动实施方案
2014/03/10 职场文书
奠基仪式主持词
2014/03/20 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
寒假家长评语大全
2014/04/16 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
假释思想汇报范文
2014/10/11 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
老人院义工活动感想
2015/08/07 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
工程移交协议书
2016/03/24 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS