一、创建节点
　　为了使页面更加智能化，有时我们想动态的在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. AngularJS中控制器之间通信方法

    在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...

  2. python学习笔记之基础一（第一天）

    1. python字符介绍 在C语言中没有字符串,只有字符 在python中的字符串hello,在C语言中是以字符数组在内存存放['h','e','l','l','o'],如果对字符串修改,则是在内存 ...

  3. FTPClient使用中的问题--获取当前工作目录为null

    使用org.apache.commons.net.ftp.FTPClient 来做ftp的上传下载功能 FTPClient ftp = new FTPClient();ftp.connect(doc. ...

  4. iOS中什么是superView？（新手概念简述版）

    文/司马陶冶(简书作者)/文章有删改原文链接:http://www.jianshu.com/p/8537dac37852 著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 在iPhone ...

  5. 最牛B的编码套路 - 呦呦鹿鸣 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  6. Safari浏览器中对js Date对象的支持

    看了一下自己上一次写博客还是3月份,那是还没有毕业,实习也没那么多事情,毕业设计也才刚开始做,那时天天晚上都把电脑带回家继续学习,而现在一工作忙为借口已经不怎么进行什么知识总结了,只是在印象笔记里做做 ...

  7. jsp中button与submit的用法

    button:可以对返回的数据进行格式化,反应到页面上,可以用form表单序列化提交也可以不用form表单提交 <form id="addForm"> <inpu ...

  8. Java的日期工具类

    package com.tech.jin.util; import java.text.DateFormat; import java.text.ParseException; import java ...

  9. jQuery 弹出层脚本

    直接贴代码: $.extend({ closeBox: function (o, x, fn) { $('#' + o).fadeOut(500, function () { if (fn & ...

  10. sqlalchemy中文乱码问题解决方案

    本文参考http://firefish.blog.51cto.com/298258/112794/的解决方案 问题: 本文在Ubuntu上利用scrapy抓取数据写入mysql数据库时,用到sqlal ...