Heim >Web-Frontend >js-Tutorial >So fügen Sie Elemente mithilfe der Append-Methode in jQuery hinzu
So fügen Sie Elemente mithilfe der Append-Methode in jQuery hinzu
- 不言Original
- 2018-12-28 17:35:096331Durchsuche
Die Append-Methode ist eine Methode, die HTML-Elemente dynamisch hinzufügen kann. Sie können eine beliebige Anzahl von HTML-Elementen hinzufügen Append-Methode.
Wie verwende ich die Append-Methode?
$(‘选择器’).append(‘添加的内容’);
Nachdem Sie die Klasse und ID im Selektor angegeben haben, rufen Sie append auf und geben Sie an, was hinzugefügt werden soll.
Sehen wir uns ein konkretes Beispiel an
Fügen Sie das li-Element im ul-Tag hinzu, indem Sie auf die Schaltfläche klicken. Der Code lautet wie folgt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("button").click(function() {
$("ul").append("<li>添加的内容</li>");
});
});
</script>
</head>
<body>
<button>button</button>
<ul>
</ul>
</body>
</html>Erstellen Sie ein Ereignis, das ausgelöst werden soll, wenn Klicken Sie auf die Schaltfläche und führen Sie dann die darin enthaltene Append-Methode aus.
Schreiben Sie eine Anhängemethode für den Selektor, geben Sie das ul-Tag an und fügen Sie das li-Tag zum Selektor hinzu.
Bei jedem Tastendruck wird also die Append-Methode aufgerufen und die Anzahl der Elemente erhöht.
Der Anzeigeeffekt im Browser ist wie folgt
Wenn auf die Schaltfläche geklickt wird, wird bei jedem Klick ein Inhalt angezeigt Der Effekt von fünf Klicks ist wie folgt:
Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen der PHP-Chinese-Website! ! !
Das obige ist der detaillierte Inhalt vonSo fügen Sie Elemente mithilfe der Append-Methode in jQuery hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!