Jquery | 外部插入节点

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>

相关阅读:
内存映射文件原理探索（转）
inux内存映射和共享内存理解和区别
 MySQL中的sleep函数介绍
 flask源码解析之上下文为什么用栈
 linux system函数详解
 Python中的可迭代对象、迭代器和生成器，协程的异同点
 GB2312汉字区位码、交换码和机内码转换方法 (ZT)
pthread_cond_signal该放在什么地方？
IPC介绍——10个ipcs例子
 lsof
原文地址：https://www.cnblogs.com/jj81/p/9796133.html