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 函数中的参数使用分析
Mar 27 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
实例浅析js的this
Dec 11 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
Vue.js标签页组件使用方法详解
Oct 19 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php生成随机数的三种方法
2014/09/10 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
如何在PHP中读写文件
2020/09/07 PHP
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
利用Python开发微信支付的注意事项
2016/08/19 Python
python如何让类支持比较运算
2018/03/20 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
django 环境变量配置过程详解
2019/08/06 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
学生会招新策划书
2014/02/14 职场文书
学生会主席竞聘书
2014/03/31 职场文书
个人欠款担保书
2014/05/20 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
观看信仰心得体会
2014/09/04 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
2016年元旦主持词
2015/07/06 职场文书
2019大学生实习报告
2019/06/21 职场文书