在 jQuery 中创建元素

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

在 jQuery 中创建元素

作者：迹忆客最近更新：2023/03/13 浏览次数：

createElement() 是来自核心 JavaScript 的用于创建 HTML 元素的方法。在 jQuery 中，有一些方法可以执行类似的操作。

本教程演示如何在 jQuery 中创建 HTML 元素。

在 jQuery 中创建元素

jQuery 中有四种创建 HTML 元素的方法：

让我们讨论并尝试每种方法的示例。

使用 `append()` 方法在 jQuery 中创建元素

append() 方法将元素添加到所选元素的末尾。添加一个 HTML 元素的语法很简单。

参见示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#DemoButton").click(function(){
            $("#two").append(" <p> This is paragraph three </p>");
        });

    });
    </script>
</head>
<body>

    <p>This is paragraph One.</p>
    <p id="two">This is paragraph two.</p>

    <button id="DemoButton">Append paragraph</button>
</body>
</html>

上面的代码将一次添加一个 HTML 段落元素。

我们还可以使用 append() 方法创建多个元素。参见示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    function append_paragraphs() {
        var ELement1 = "<p>This is a paragraph two. </p>";        // paragraph with HTML
        var ELement2 = $("<p></p>").text("This is a paragraph three.");  // paragraph with jQuery
        var ELement3 = document.createElement("p");
        ELement3.innerHTML = "This is a paragraph four";         // paragraph with DOM
        $("body").append(ELement1, ELement2, ELement3);   // Append all paragraph elements
    }
    </script>
</head>
<body>

    <p>This is a paragraph one.</p>
    <button onclick="append_paragraphs()">Append Paragraphs</button>

</body>
</html>

上面的代码将使用 append() 方法创建三个新段落。

使用 `prepend()` 方法在 jQuery 中创建元素

prepend() 方法将元素添加到所选元素的开头。一个 HTML 元素的语法很简单。

参见示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#DemoButton").click(function(){
            $("#two").prepend(" <p> This is the new paragraph</p>");
        });

    });
    </script>
</head>
<body>
    <p>This is paragraph One.</p>
    <p id="two">This is paragraph two.</p>
    <button id="DemoButton">Append paragraph</button>
</body>
</html>

该代码将在第二段之前附加一段。

同样，我们预先添加多个元素。参见示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    function Prepend_paragraphs() {
        var ELement1 = "<p>This is a paragraph one. </p>";        // paragraph with HTML
        var ELement2 = $("<p></p>").text("This is a paragraph two.");  // paragraph with jQuery
        var ELement3 = document.createElement("p");
        ELement3.innerHTML = "This is a paragraph three";         // paragraph with DOM
        $("body").prepend(ELement1, ELement2, ELement3);   // Prepend all paragraph elements
    }
    </script>
</head>
<body>

    <p>This is a the last paragraph.</p>
    <button onclick="Prepend_paragraphs()">Prepend Paragraphs</button>

</body>
</html>

上面的代码将在给定元素之前创建多个元素。

在 jQuery 中使用 `after()` 和 `before()` 方法创建元素

after() 方法将在给定元素之后创建一个元素，类似地，before() 方法将在给定元素之前创建一个元素。

请看下面两个方法的例子。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script>
    $(document).ready(function(){
        $("#button1").click(function(){
            $("h1").before("<b> Element Before </b>");
        });

        $("#button2").click(function(){
            $("h1").after("<b> Element After </b>");
        });
    });
</script>
</head>
<body>

<h1>迹忆客</h1>
<br><br>

<button id="button1">Insert element before</button>
<button id="button2">Insert element after</button>

</body>
</html>

上面的代码将在给定元素之前和之后创建元素。

同样，我们可以使用 after() 和 before() 方法创建多个元素。参见示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    function After_Element() {
        var Element1 = "<b>This </b>";           // element with HTML
        var Element2 = $("<b></b>").text("is ");  //with jQuery
        var Element3 = document.createElement("b");   // with DOM
        Element3.innerHTML = "jiyik.com.";
        $("h1").after(Element1, Element2, Element3);    // Insert new elements after h1
    }
    function Before_Element() {
        var Element1 = "<b>This </b>";           // element with HTML
        var Element2 = $("<b></b>").text("is ");  //with jQuery
        var Element3 = document.createElement("b");   // with DOM
        Element3.innerHTML = "jiyik.com.";
        $("h1").before(Element1, Element2, Element3);    // Insert new elements before h1
    }

    </script>
</head>
<body>

    <h1>迹忆客</h1>
    <br><br>

    <p>Create Elements after the h1.</p>
    <button onclick="After_Element()">Insert after</button>
    <p>Create Elements before the h1.</p>
    <button onclick="Before_Element()">Insert before</button>

</body>
</html>