利用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基础之(四)jQuery创建DOM元素的更多相关文章

  1. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  2. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery基础之获取和设置标签元素属性

    jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...

  4. 动态创建dom元素

    效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...

  5. jQuery使用(四):DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

  6. jQuery基础学习(三)—jQuery中的DOM操作

    一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法 ...

  7. 用jQuery绑定事件到动态创建的元素上

    jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...

  8. Kendo UI for jQuery使用教程:小部件DOM元素结构

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  9. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

随机推荐

  1. 有用的MySQL语句

    摘自onefish资料库 1. 计算年数你想通过生日来计算这个人有几岁了. SELECT DATE_FORMAT(FROM_DAYS(TO_DAYS(now()) - TO_DAYS(@dateofb ...

  2. Redhat6.5 安装64位oracle11.2.0.1

    系统架构 [root@localhost ~]# uname -a Linux db 2.6.32-431.el6.x86_64 #1 SMP Sun Nov 10 22:19:54 EST 2013 ...

  3. spark Basic code demo

    spark-shell --master=spark://namenode01:7077 --executor-memory 2g --driver-class-path /app/spark141/ ...

  4. js开发工具箱

    昨天看到一位大牛的博客,里面有一篇文章“web前端开发分享-目录”,文章中提到的一个给前端er用的一个js开发工具箱.自己使用了一下,非常好用,代码压缩,代码美化,加密,解密之类基本功能都有,生成二维 ...

  5. docker containerd中的容器操作

    containerd的中的各种操作都是通过Task来进行的,因此对于容器的create, start, delete等等操作其实都是一个个的Task而已. Task的数据结构如下所示: type Ta ...

  6. UVA 103 Stacking Boxes --LIS

    实际上是一个扩展维度的矩形嵌套问题. 一个物体能嵌入另一个物体中,当且仅当这个物体的所有维度的长度都小于另外一个(本题是小于等于),又因为可以旋转等变换,所以干脆将每个箱子的边从小到大排序,以便于判断 ...

  7. java11-5 String类的转换功能

    String的转换功能: byte[] getBytes():把字符串转换为字节数组. char[] toCharArray():把字符串转换为字符数组. static String valueOf( ...

  8. 003医疗项目-关于<context:property-placeholder location="classpath:db.properties"/>的问题

    项目结构如下:

  9. 【转】【PNG压缩工具】PNG 图像的优化及压缩工具介绍

    图像格式有许多种不同类型,在互联网上最常见的有JPEG.GIF.BMP.TIFF和PNG.每一种图像格式都有它自己的用途,比如GIF是用于动画的,JPEG是用于高清图片的,这种图片在保存或者调整大小后 ...

  10. [py]os.walk爬目录&sys.argv灵活获取参数

    1, 遍历目录 os.walk('/tmp') os.next()   2,sys.argv ######################################## py@lanny:~/t ...