zoukankan html css js c++ java

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>

查看全文

相关阅读:
Task 5.1 电梯调度程序需求调研报告
 Task 4 求数组的连续子数组的最大和（团队合作）
class 3 求数组中的最大值（单元测试）
《你的灯亮着吗》读书笔记3
优惠购书
 校友聊NABCD
环状二维数组（改进版）
环状二维数组
 环状一维数组
 二维数组最大值

原文地址：https://www.cnblogs.com/jj81/p/9796133.html