一、创建节点
　　为了使页面更加智能化，有时我们想动态的在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. 17.如何修改SESSION的生存时间。

    方法1:将php.ini中的session.gc_maxlifetime设置为9999重启apache 方法2:$savePath = "./session_save_dir/"; ...

  2. DI依赖注入/IOC控制反转

    DI依赖注入# 啥都不说,直接上代码 <?php class UserController { private $user; function __construct(UserModel $us ...

  3. swift基础：第三部分：对第一部分的补充说明

    今天是我学习swift的第二天,虽然我和swift的距离有点远,但我相信,我会慢慢的接近这门语言的.好了,我们聊聊昨天晚上的事吧,昨天晚上下班早,回到家时,真是惊喜哈,宿舍那两做好了饭,等我吃饭,想对 ...

  4. Magento-找出没有图片的产品

    最近维护网站,发现网站的产品很多都没有图片显示,看了一下是因为没有在后台勾选图片,就是 image small_image  thumbnail 这三项,就算有图片如果没有勾选的话也不会显示出来,产品 ...

  5. UVa 10917 Dijkstra

    本来就是水题一道. 题意:一个人要从点1去到点2,中间还有很多点和很多条边.问你如果他每次走的边(a,b)都满足:a点到目标点的最短距离<b点到目标点的最短距离,那么他从点1出发到点2总共有多少 ...

  6. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  7. CSS学习之道

    @media的IE-hacks,精彩绝伦 http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/

  8. 省市联动sql脚本

    create database ProCityData use Procitydata --创建Province(省表) create table Province ( ProID int prima ...

  9. Monkey的ADB命令简单使用示例和解析

    进行简单的压力测试: 1. adb shell monkey –p 包名 –v-v 3000 >E:\bugLog.txt -v -v 标识打印的日志的详细级别为2级,更高级有3级,也可以用1级 ...

  10. USB驱动开发大全【转】

    本文转载自:http://www.360doc.com/content/12/0504/19/8363527_208666082.shtml 编写USB驱动程序步骤:1所有usb驱动都必须创建主要结构 ...