jQuery-添加元素

jquery添加元素一共有四个语句:

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append() 在被选元素的结尾插入内容（被选元素内部）

prepend() 在被选元素的开头插入内容（被选元素内部）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#btnFirst").click(function() {
                    $("p").prepend("<b style='color:#FF0000'>追加成功</b>");
                });
                $("#btnSecond").click(function() {
                    $("ol").prepend("<li style='color:#FF0000'>追加成功</li>");
                });
//                $("#btnFirst").click(function() {
//                    $("p").append("<b style='color:#FF0000'>追加成功</b>");
//                });
//                $("#btnSecond").click(function() {
//                    $("ol").append("<li style='color:#FF0000'>追加成功</li>");
//                });
            });
        </script>
    </head>

    <body>
        <p>测试append()</p>
        <ol>
            <li>Java</li>
            <li>C#</li>
        </ol>
        <button id="btnFirst">追加文本</button>
        <button id="btnSecond">追加列表项</button>
    </body>

</html>

after() 在被选元素之后插入内容（被选元素外部）

before() 在被选元素之前插入内容 （被选元素外部）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#btnFirst").click(function() {
                    $("#targetP").after("<b style='color:#FF0000'>追加成功</b>");
                });
                $("#btnSecond").click(function() {
                    $("#targetOl").after("<li style='color:#FF0000'>追加成功</li>");
                });
//                $("#btnFirst").click(function() {
//                    $("#targetP").before("<b style='color:#FF0000'>追加成功</b>");
//                });
//                $("#btnSecond").click(function() {
//                    $("#targetOl").before("<li style='color:#FF0000'>追加成功</li>");
//                });
            });
        </script>
    </head>

    <body>
        <p id="targetP">测试append()</p>
        <p>测试append()</p>
        <ol id="targetOl">
            <li>Java</li>
            <li>C#</li>
        </ol>
        <button id="btnFirst">追加文本</button>
        <button id="btnSecond">追加列表项</button>
    </body>

</html>

猜你喜欢