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. Decorator Pattern

    1.Decorator 模式通过组合的方式提供了一种给类增加职责(操作)的方法. 2.Decorator模式结构图 3.实现 #ifndef _DECORATOR_H_ #define _DECORA ...

  2. HTTP1.1学习笔记 -- RFC2616

    本人跟web无缘,从来没有想去学http,现在看来,学学也是有益无害,总会要用着点滴. RFC见这里: https://www.ietf.org/rfc/rfc2616.txt 0. URI格式 ht ...

  3. 很好的 DHCP协议与dhcpcd分析【转】

    本文转载自:http://blog.csdn.net/gjsisi/article/details/18052369 第一部分 DHCP工作过程 DHCP的工作过程主要分为以下六个阶段:     发现 ...

  4. VK Cup 2012 Qualification Round 1 E. Phone Talks —— DP

    题目链接:http://codeforces.com/contest/158/problem/E E. Phone Talks time limit per test 3 seconds memory ...

  5. 2017广东工业大学程序设计竞赛 E倒水(Water)

    题目链接:http://www.gdutcode.sinaapp.com/problem.php?cid=1057&pid=4 题解: 方法一:对n取2的对数: 取对数的公式:s = log( ...

  6. collectd+logstash+influxdb+grafana构建windows服务器应用监控系统

    一.背景介绍 本监控方案支持对Windows Server服务器集群的全面监控,方案提供丰富的图表展示, 以及对异常问题进行邮件的实时报警. 本系统由Collectd(操作系统数据搜集).logsta ...

  7. linux下syslog使用说明

    转自:http://blog.chinaunix.net/uid-25120309-id-3359929.html syslog 系统日志应用  1) 概述       syslog是Linux系统默 ...

  8. linux c++ 连接mysql 数据库

    Mysql是数据库中的主流,因此我一直以为在Linux下配置会很很容易,结果Google了大半天,大部分网页只说了如何安装Mysql之类的废话,对如何使用C/C++连接Mysql却只字不提,或者提的方 ...

  9. NMS 原理 了解

    NMS 原理:对于Bounding Box的列表B及其对应的置信度S,采用下面的计算方式.选择具有最大score的检测框M,将其从B集合中移除并加入到最终的检测结果D中.通常将B中剩余检测框中与M的I ...

  10. 基于区域的全卷积神经网络（R-FCN）简介

    在 Faster R-CNN 中,检测器使用了多个全连接层进行预测.如果有 2000 个 ROI,那么成本非常高. feature_maps = process(image)ROIs = region ...