一、创建节点
　　为了使页面更加智能化，有时我们想动态的在html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
     var box = $('<div id="box">节点</div>'); //创建一个节点
     $('body').append(box); //将节点插入到<body>元素内部
});
</script>
</head>
<body>

</body>

二、插入节点
　　在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery 提供了其他几个方法来插入节点。

　　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
     var box = $('<div id="box">增加节点</div>'); //创建一个节点
     $('div').append(box); //将节点插入到<div>元素内部的内容‘节点’后面
});
</script>
</head>
<body>
    <div>节点</div>
    <div>节点</div>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
     $('div').append(function (index, html) { //使用匿名函数插入节点，html 是原节点
        return '<div>节点</div>';
    });
});
</script>
</head>
<body>
    <div>节点</div>
    <div>节点</div>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
     $("strong").appendTo("div");//将strong这个标签包括内容添加到div节点内部
     //$('strong').appendTo($('div')); //同上
});
</script>
</head>
<body>
    <strong>DOM</strong>
    <div>节点</div>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    //$('div').prepend('<span>节点</span>'); //将span 插入到div 内部的前面
    //$('div').append(function (index, html) { //使用匿名函数，同上 html是原来div里面的内容
        //return '<span>'+index+html+'节点</span>';
    //});
    //$('strong').prependTo('div'); //将strong 移入div 内部的前面
    $('strong').prependTo($('div')); //同上
});
</script>
</head>
<body>
    <strong>DOM</strong>
    <div>节点</div>
</body>

　　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
    //$('div').after('<span>节点</span>'); //向div 的同级节点后面插入span
    //$('div').after(function (index, html) { //使用匿名函数，同上
        //return '<span>节点</span>';
    //});
    //$('div').before('<span>节点</span>'); //向div 的同级节点前面插入span
    //$('div').before(function (index, html) { //使用匿名函数，同上
        //return '<span>节点</span>';
    //});
    //$('strong').insertAfter('div'); //将strong 元素移到div 元素外部的后面
    $('strong').insertBefore('div'); //将strong 元素移到div 元素外部的前面
});
</script>
</head>
<body>
    <strong>DOM</strong>
    <div>节点</div>
</body>

JQuery_DOM 节点操作之创建节点、插入节点的更多相关文章

  1. javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点

    DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...

  2. js的DOM节点操作：创建 ，插入，删除，复制，查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  3. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  4. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

  5. jQuery 节点操作（创建 插入 删除 复制 替换 包裹）

    一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...

  6. C#中操作xml文件（插入节点、修改、删除）

    已知有一个xml文件(bookstore.xml)如下: <?xml version="1.0" encoding="gb2312"?> <b ...

  7. c#操作xml的代码(插入节点、修改节点、删除节点等)

    bookstore.xml文件内容: 复制代码代码示例: <?xml version="1.0" encoding="gb2312"?><bo ...

  8. WPF对于xml的简单操作（下下）插入节点并排序

    正如T所说,下下,这个方法不堪入目,￣□￣|| 贴上再说 //先搞个struct声明 private struct datastruct { public string x; public strin ...

  9. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

随机推荐

  1. oracle 11g如何完全卸载

    方法/步骤   停用oracle服务:进入计算机管理,在服务中,找到oracle开头的所有服务,右击选择停止   在开始菜单中,找到Universal Installer,运行Oracle Unive ...

  2. Generate Ubuntu Install Media On Mac

    Opps, my computer system was broken again... Let's repire it. Introduction The system of my PC is br ...

  3. Android 开发基础及环境配置

    2011年买了第一部安卓操作系统的手机,当时势头正盛的HTC不可思议(incredible),当时的想法就是想学习下智能手机开发,但是由于各种原因,客观上是公司的项目太忙了,忙于项目管理.团队建设.客 ...

  4. [C#开发小技巧]解决WinForm控件TabControl闪烁问题

    在用C#开发WinForm程序时,常发现TabControl出现严重的闪烁问题,这主要是由于TabControl控件在实现时会绘制默认的窗口背景.其实以下一段简单的代码可以有效的缓解该问题的发生.这就 ...

  5. 使用SQL语句查询日期(当月天数,当月第一天,当月最后一天,本年最后一天,当月第一个星期) 日期转字符串

    取某月天数:,) --当月天数 ,DATEADD(m, DATEDIFF(m,,getdate())+,))) ---当月第一天 ,getdate()) ---当月最后一天 ,dateadd(m,,d ...

  6. java String 详解

    1.java语言的字符串序列是通过字符串类实现的.java提供了3个字符串类:String类.StringBuilder类和StringBuffer类.String类是不变字符串,StringBuff ...

  7. Tomcat源码导入eclipse的步骤

    Tomcat源码导入eclipse 一.下载源码 1.  进入Apache 官网:http://tomcat.apache.org/ 2.  在左边侧选择要下载的源码的版本. 3.  或者直接通过Ar ...

  8. 将.NET dll注册到GAC(Global Assembly Cache)中

    当发现有多个解决方案引用一个dll时,为了不重复引用所以将.net的一个dll注册到GAC中去. gacutil.exe. 记得使用管理员权限打开 开始菜单-Microsoft Visual Stud ...

  9. maven国内镜像（maven下载慢的解决方法）

    Maven是当前流行的项目管理工具,但官方的库在国外经常连不上,连上也下载速度很慢.国内oschina的maven服务器很早之前就关了.今天发现阿里云的一个中央仓库,亲测可用. <mirror& ...

  10. java.sql.SQLException: ORA-00001: 违反唯一约束条件 (SCOTT.SYS_C0011456)

    我tb_user数据库的主键是id,在这个java程序中: String sql="insert into tb_user(id,USER_NAME,USER_PASSWORD) value ...