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. ZOJ - 3953 Intervals 【贪心】

    题目链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3953 题意 给出N个区间,求去掉某些区间,使得剩下的区间中,任何 ...

  2. delphi2010\delphi XE7 开发及调试WebService 实例

    使用delphi已经10多年了,一直搞桌面程序开发,对Webservice一直很陌生,近来因工作需要,学习delphi开发WebService,担心遗忘,作此笔记. 特别感谢 中塑在线技术总监 大犇  ...

  3. 深入Vue.js从源码开始(二)

    从入口开始 我们之前提到过 Vue.js 构建过程,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/en ...

  4. css中IE判断语句 if !IE

    1. <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–> 2. <!–[if IE]> 所有的IE可识别 <! ...

  5. [RK3288][Android6.0] 调试笔记 --- 替换系统签名【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/55100299 Platform: RK3288OS: Android 6.0Kernel: ...

  6. Codeforces Round #383 (Div. 2) C. Arpa's loud Owf and Mehrdad's evil plan —— DFS找环

    题目链接:http://codeforces.com/contest/742/problem/C C. Arpa's loud Owf and Mehrdad's evil plan time lim ...

  7. RBAC打造通用web管理权限

    https://www.cnblogs.com/lamp01/p/6576432.html https://www.imooc.com/learn/799

  8. bzoj 3028 食物 —— 生成函数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3028 式子很好推,详细可以看这篇博客:https://blog.csdn.net/wu_to ...

  9. HDU2159(完全背包)

    FATE Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Description ...

  10. webpack 小demo

    1 安装node.js 2 安装cnpm 3 安装webpack cnpm install --save-dev webpack 对于大多数项目,我们建议本地安装.这可以使我们在引入破坏式变更的依赖时 ...