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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 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
example2.php
2006/10/09 PHP
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
PHP实现简单登录界面
2019/10/23 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
利用python实现AR教程
2019/11/20 Python
python动态文本进度条的实例代码
2020/01/22 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
园林资料员岗位职责
2013/12/30 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
项目投资建议书
2014/05/16 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
运动会闭幕词
2015/01/28 职场文书
免职通知
2015/04/23 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js