个人对Jquery添加新内容append(),prepend()和after(),before()的理解

时间：2021-02-23 23:39:29

直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.3.1.js"></script>
    <script>
    function appendText() {
        // 以 HTML 创建新元素
        var txt1 = "<p>我在里面</p>";
        // 以 jQuery 创建新元素
        var txt2 = $("<p></p>").text("我在里面+1"); //如果直接创建$("p").text("Text.")就会把已存在的所有p元素替换掉，注意区分
        // 通过 DOM 来创建文本
        var txt3 = document.createElement("p");
        txt3.innerHTML = "我在里面+2";
        $("#p1").append(txt1, txt2, txt3); // 追加新元素
    }

    function afterText() {
        var txt1 = "<b>我在外面</b>"; // 以 HTML 创建元素
        var txt2 = $("<i></i>").text("我在外面 "); // 通过 jQuery 创建元素
        var txt3 = document.createElement("big"); // 通过 DOM 创建元素
        txt3.innerHTML = "我在外面!";
        $("#p2").after(txt1, txt2, txt3); // 在 img 之后插入新元素
    }
    </script>
</head>

<body>
    <p id="p1">append(),prepend()</p>
    <button onclick="appendText()">append(),prepend()追加文本</button>
    <p id="p2">after(),before()</p>
    <pre>
    通过 jQuery，可以很容易地添加新元素/内容。
        添加新的 HTML 内容
        •append() - 在被选元素的结尾插入内容
        •prepend() - 在被选元素的开头插入内容
        •after() - 在被选元素之后插入内容
        •before() - 在被选元素之前插入内容
        append(),prepend():是在被选的这个元素里操作
        after(),before()：是在被选元素外面
        两个的区别在于一个在里，一个在外操作，通过观察源代码更易察觉两者的区别

   </pre>
    <button onclick="afterText()">after(),before()添加文本</button>
</body>

</html>


标签：

相关文章