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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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/06/16 PHP
分享PHP header函数使用教程
2013/09/05 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
Python切换pip安装源的方法详解
2016/11/18 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Python多线程原理与用法详解
2018/08/20 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
医院竞聘演讲稿
2014/05/16 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python