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中filter(),not(),split()使用方法
Jul 06 Javascript
js opener的使用详解
Jan 11 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
如何用webpack4带你实现一个vue的打包的项目
Jun 20 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生成缩略图的函数代码(修改版)
2011/01/18 PHP
php生成二维码
2015/08/10 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
详解vue高级特性
2020/06/09 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
网游商务专员求职信
2013/10/15 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
上班迟到检讨书
2014/01/10 职场文书
保险专业求职信
2014/07/07 职场文书
材料员岗位职责
2015/02/10 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
实习推荐信格式模板
2015/03/27 职场文书
法定代表人资格证明书
2015/06/18 职场文书
React自定义hook的方法
2022/06/25 Javascript