after(content) :

//在 span 元素外部的后面 插入 "<span><b>Write Less Do More</b><span>"

 $("span").after("<span><b>Write Less Do More</b><span>"); // 插入内容

after(function):

    //在 span 元素外部的后面插入 reHtml方法返回的内容

    $("span").after(retHtml); // 插入内容

    function retHtml() {

        var str = "<span><b>Write Less Do More</b><span>";

        return str;

    }

before(content)

//在 span 元素外部的前面 插入 "<span><b>Write Less Do More</b><span>"

$("span").before("<span><b>Write Less Do More</b><span>"); // 插入内容

before(funtion)

//在 span 元素外部的前面插入 reHtml方法返回的内容

$("span").before(retHtml); // 插入内容

function retHtml() {

var str = "<span><b>Write Less Do More</b><span>";

return str;

}

insertAfter(content)

// 将"<span><b>Write Less Do More</b><span>"插入 span 元素外部的后面

$("<span><b>Write Less Do More</b><span>").insertAfter($("span")); // 插入内容

insertBefore(content)

// 将"<span><b>Write Less Do More</b><span>"插入 span 元素外部的前面

 $("<span><b>Write Less Do More</b><span>").insertBefore($("span")); // 插入内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> 动态插入节点方法 </title>

    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>

    <style type="text/css">

        body {

            font-size: 13px

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $("#bt0").click(function () {

            })

            $("#bt1").click(function () {

                $("span").after(retHtml); // 插入内容

            })

            $("#bt2").click(function () {

                $("span").before(retHtml); // 插入内容

            })

            $("#bt3").click(function () {

                $("<span><b>Write Less Do More</b><span>").insertAfter($("span")); // 插入内容

            })

            $("#bt4").click(function () {

                $("<span><b>Write Less Do More</b><span>").insertBefore($("span")); // 插入内容

            })

            function retHtml() {

                var str = "<span><b>Write Less Do More</b><span>";

                return str;

            }

            var htmll = $('body').html();

            $('p').text(htmll);

        })

    </script>

</head>

<body>

    <span>jQuery</span>

    <p></p>

    <button id="bt1">after</button>

    <button id="bt2">before</button>

    <button id="bt3">insertAfter</button>

    <button id="bt4">insertBefore</button>

</body>

</html>

Jquery | 外部插入节点的更多相关文章

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

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

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

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

  3. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  4. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  5. jQuery插入节点（移动节点）

    jQuery插入节点(移动节点) <%@ page language="java" import="java.util.*" pageEncoding=& ...

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

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

  7. JQuery_DOM 节点操作之创建节点、插入节点

    一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...

  8. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  9. DOM常用外部插入方法与区别

    1.DOM外部插入after()与before() 节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系.之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处 ...

随机推荐

  1. 用ASTERISK搭建自己的免费VOIP服务器

    服务器别闲着,博主又要给大家带来新的玩法咯 1. 这里以 Debian 为例子,安装 Asterisk apt-get update apt-get install asterisk 2. 预设置 A ...

  2. SAM初步

    SAM(Suffix Automaton),后缀自动机. SAM是种十分神奇的数据结构,我认为他的主要神奇之处,在于最大限度的利用了分类思想. SAM上有两种边,代表两种转移方式. 一种是树边,一种是 ...

  3. Codeforces Round #198 (Div. 2) E. Iahub and Permutations —— 容斥原理

    题目链接:http://codeforces.com/contest/340/problem/E E. Iahub and Permutations time limit per test 1 sec ...

  4. C++中map容器的说明和使用技巧

    C++中map容器提供一个键值对容器,map与multimap差别仅仅在于multiple允许一个键对应多个值. 一.map的说明 1 头文件 #include <map> 2 定义 ma ...

  5. BZOJ2006：超级钢琴（ST表+堆求前K大区间和）

    Description 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度 ...

  6. BZOJ_2730_ [HNOI2012]矿场搭建_点双联通分量

    BZOJ_2730_ [HNOI2012]矿场搭建_点双联通分量 Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路 ...

  7. c++ zlib(qt)压缩与解压缩

    #include <QtCore/QCoreApplication> #include "zlib.h" #include "stdio.h" #i ...

  8. Thread之二：sleep、wait、yield、join

    一.回顾下概念 Java中的多线程是一种抢占式的机制而不是分时机制.线程主要有以下几种状态:新建,就绪,运行,阻塞,死亡.抢占式机制指的是有多个线程处于就绪状态,但是只有一个线程在运行.   1.sl ...

  9. 选择合适的innodb_log_file_size

    如果对 Innodb 数据表有大量的写入操作,那么选择合适的 innodb_log_file_size 值对提升MySQL性能很重要.然而设置太大了,就会增加恢复的时间,因此在MySQL崩溃或者突然断 ...

  10. 8个超炫的 Web 效果

    CodePen 是一个在线的 HTML.CSS 和 JavaScript 代码编辑器,能够编写代码并即时预览效果.你在上面可以在线展示自己的作品,也可以看到其他人在网页中实现的各种令人惊奇的效果. 今 ...