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. MySQL 的“root”用户修改密码

    MySQL 的“root”用户默认状态是没有密码的,所以在 PHP 中您可以使用 mysql_connect("localhost","root"," ...

  2. memset 导致的段错误（segmentation fault）

    在调试Minixml库时,定义了一个结构体: struct ssid_info_s{ std::string wl_ssid_name; std::string wl_ssid_mac; std::s ...

  3. 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 ...

  4. WebDriver API——浏览器控制暨如何学习webdriver API

    在测试过程中我们可能需要对浏览器进行控制,大小控制啊,刷新页面啊,前进后退等等,最常用的两个接口是window和Navigation. 我们最常用的就是这4个,那么你是否感兴趣它们后面是什么,它们是怎 ...

  5. oracle查看锁表进程，杀掉锁表进程

    查看锁表进程SQL语句1: select sess.sid,     sess.serial#,     lo.oracle_username,     lo.os_user_name,     ao ...

  6. elasticsearch function_score Query——文档排序结果的最后一道墙

    function_score Query The function_score query is the ultimate tool for taking control of the scoring ...

  7. C++ 两款静态检查工具

    pclint(收费) http://www.gimpel.com/html/pcl.htmpc-lint是资格最老,最强力的代码检查工具,但是是收费软件,并且配置起来有一点点麻烦. ccpchecke ...

  8. bzoj 4827 [Hnoi2017] 礼物 —— FFT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4827 首先,旋转对应,可以把 b 序列扩展成2倍,则 a 序列对应到的还是一段区间: 再把 ...

  9. bzoj 2179 FFT快速傅立叶 —— FFT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2179 默写板子,注释的是忘记的地方. 代码如下: #include<iostream& ...

  10. poj 2069 Super Star —— 模拟退火

    题目:http://poj.org/problem?id=2069 仍是随机地模拟退火,然而却WA了: 看看网上的题解,都是另一种做法——向距离最远的点靠近: 于是也改成那样,竟然真的A了...感觉这 ...