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. git （转载）

    文章转载 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的 ...

  2. Objective-c继承与组合

    Objective-C 继承 继承:是一种XXX是XXX的关系.例如:学生是人,所以学生与人就是继承的关系. #import <Foundation/Foundation.h> @inte ...

  3. Unable to start adb server: adb server version (32) doesn't match this client (39); killing...

    关于Android studio 连接不上adb问题,有人说重启机器,有人说重启工具,也有人说adb kill-server.然后我都尝试过依然没有解决.通过各种查询.最终成功的解决!!! adb n ...

  4. view 视图生命周期

    layout控制当前view的布局,onlayout控制子view的布局,容器ui会用到 onIntercept在父亲这执行拦截,子视图可通过requestDisallow请求父亲不要拦截

  5. fatal error C1902: 程序数据库管理器不匹配；请检查安装解决

    http://blog.sina.com.cn/s/blog_9f4bc8e301015uhz.html 1.错误提示:VS2008编译错误fatal error C1902: 程序数据库管理器不匹配 ...

  6. <ZZ>linux yum命令详解

    http://www.cnblogs.com/chuncn/archive/2010/10/17/1853915.html yum(全称为 Yellow dog Updater, Modified)是 ...

  7. 20171202作业1python入门

    1.简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型 编译型:需要编译器,执行前一次性翻译成机器能读懂的代码(如c,c++,执行速度快,调试麻烦) 解释型:需要解释器 ...

  8. BZOJ_2369_区间_决策单调性

    BZOJ_2369_区间_决策单调性 Description 对于一个区间集合 {A1,A2……Ak}(K>1,Ai不等于Aj(i不等于J),定义其权值   S=|A1∪A2∪……AK|*|A1 ...

  9. [Codeforces 787D] Legacy

    [题目链接] https://codeforces.com/contest/787/problem/D [算法] 线段树优化建边 ,  然后用Dijkstra算法求单源最短路 时间复杂度 : O((N ...

  10. bzoj 3992 [SDOI2015] 序列统计 —— NTT (循环卷积+快速幂)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3992 (学习NTT:https://riteme.github.io/blog/2016-8 ...