Erstellen Sie Elemente in jQuery

Erstellen Sie Elemente in jQuery

  1. Erstellen Sie Elemente in jQuery
  2. Verwenden Sie die append()-Methode, um Elemente in jQuery zu erstellen
  3. Verwenden Sie die prepend()-Methode, um Elemente in jQuery zu erstellen
  4. Verwenden Sie die Methoden after() und before() zum Erstellen von Elementen in jQuery

Das createElement() ist eine Methode aus Kern-JavaScript, um ein HTML-Element zu erstellen. In jQuery gibt es einige Methoden, um eine ähnliche Operation durchzuführen.

Dieses Tutorial zeigt, wie Sie ein HTML-Element in jQuery erstellen.

Erstellen Sie Elemente in jQuery

In jQuery gibt es vier Methoden, um HTML-Elemente zu erstellen:

  1. append() - Diese Methode fügt das Element am Ende der ausgewählten Elemente hinzu.
  2. prepend() - Diese Methode fügt das Element am Anfang der ausgewählten Elemente hinzu.
  3. after() - Diese Methode fügt das Element nach den ausgewählten Elementen hinzu.
  4. before() - Diese Methode fügt das Element vor den ausgewählten Elementen hinzu.

Lassen Sie uns ein Beispiel für jede Methode diskutieren und ausprobieren.

Verwenden Sie die append()-Methode, um Elemente in jQuery zu erstellen

Die Methode append() fügt das Element am Ende des ausgewählten Elements hinzu. Die Syntax ist einfach, um ein HTML-Element hinzuzufügen.

Siehe Beispiel:

<!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>

Der obige Code fügt ein einzelnes HTML-Absatzelement auf einmal hinzu. Siehe Ausgabe:

Einzelnes Element anhängen

Wir können auch mehrere Elemente mit der Methode append() erstellen. Siehe Beispiel:

<!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>

Der obige Code erstellt drei neue Absätze mit der Methode append(). Siehe Ausgabe:

Mehrere Elemente anhängen

Verwenden Sie die prepend()-Methode, um Elemente in jQuery zu erstellen

Die Methode prepend() fügt das Element am Anfang des ausgewählten Elements hinzu. Die Syntax ist für ein HTML-Element einfach.

Siehe Beispiel:

<!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>

Der Code wird einen Absatz vor Absatz zwei anhängen. Siehe Ausgabe:

Einzelnes Element voranstellen

Ebenso stellen wir mehrere Elemente voran. Siehe Beispiel:

<!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>

Der obige Code erstellt mehrere Elemente vor dem angegebenen Element. Siehe Ausgabe:

Mehrere Elemente voranstellen

Verwenden Sie die Methoden after() und before() zum Erstellen von Elementen in jQuery

Die Methode after() erstellt ein Element nach dem angegebenen Element, und ähnlich erstellt die Methode before() ein Element vor dem angegebenen Element.

Siehe Beispiel für beide Methoden unten:

<!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>Delfstack</h1>
<br><br>

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

</body>
</html>

Der obige Code erstellt die Elemente vor und nach dem angegebenen Element. Siehe Ausgabe:

Vorher Nachher Einzelnes Element

Ebenso können wir mit den Methoden after() und before() mehrere Elemente erstellen. Siehe Beispiel:

<!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 = "Delftstack.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 = "Delftstack.com.";
        $("h1").before(Element1, Element2, Element3);    // Insert new elements before h1
    }

    </script>
</head>
<body>

    <h1>Delfstack</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>

Der obige Code fügt mehrere Elemente vor und nach dem angegebenen Element hinzu. Siehe Ausgabe:

Vorher Nachher Mehrere Elemente

Author: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Verwandter Artikel - jQuery Element

  • Elemente mit jQuery verschieben
  • Mit jQuery prüfen, ob ein Element vorhanden ist
  • Div-Element in jQuery ausblenden
  • Element nach ID in jQuery abrufen