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匿名函数的一种应用 代码封装
Jun 27 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
vue项目引入ts步骤(小结)
Oct 31 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
深入解析php中的foreach问题
2013/06/30 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
JS数据类型判断的几种常用方法
2020/07/07 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
研究生毕业鉴定
2014/01/29 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
投资合作协议书范本
2014/04/17 职场文书
党建工作经验交流材料
2014/05/25 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
2015中学教学工作总结
2015/07/22 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis