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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
js实现轮播图特效
May 28 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
前端JavaScript大管家 package.json
Nov 02 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 addAttribute()函数讲解
2019/02/03 PHP
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
运动会拉拉队口号
2014/06/09 职场文书
校庆团日活动总结
2014/08/28 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
党员查摆剖析材料
2014/10/10 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
论文答辩开场白大全
2015/05/27 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
react中的DOM操作实现
2021/06/30 Javascript
详解如何使用Nginx解决跨域问题
2022/05/06 Servers