Erstellen Sie Elemente in jQuery
- Erstellen Sie Elemente in jQuery
-
Verwenden Sie die
append()-Methode, um Elemente in jQuery zu erstellen -
Verwenden Sie die
prepend()-Methode, um Elemente in jQuery zu erstellen -
Verwenden Sie die Methoden
after()undbefore()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:
append()- Diese Methode fügt das Element am Ende der ausgewählten Elemente hinzu.prepend()- Diese Methode fügt das Element am Anfang der ausgewählten Elemente hinzu.after()- Diese Methode fügt das Element nach den ausgewählten Elementen hinzu.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:
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:
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:
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:
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:
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:
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