Heim > Artikel > Web-Frontend > So fügen Sie dynamisch einer Liste in jQuery hinzu

So fügen Sie dynamisch einer Liste in jQuery hinzu

亚连Original: 2018-06-15 15:31:423156Durchsuche

In diesem Artikel wird hauptsächlich die einfache Methode von jQuery zum dynamischen Hinzufügen neuer Elemente zu einer Liste vorgestellt, einschließlich Implementierungstechniken im Zusammenhang mit der Reaktion auf jQuery-Ereignisse und dem dynamischen Betrieb von Seitenelementen. Freunde in Not können sich auf den folgenden Artikel beziehen:

Dieser Artikel beschreibt die Beispiele. jQuery implementiert einfach die Methode des dynamischen Hinzufügens neuer Elemente zu einer Liste. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Schauen Sie sich zuerst das Rendering an:

Der vollständige Implementierungscode lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net jQuery列表添加新元素</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h3>li列表：</h3>
<ol>
    <li>jb51</li>
    <li>php</li>
    <li>javascript</li>
    <li>HTML5</li>
</ol>
<input type="text" id="text">
<input type="button" id="btn" value="添加">
<script type="text/javascript">
 $(function () {
    $(&#39;#btn&#39;).click(function () {
      $(&#39;ol&#39;).append(&#39;<li>&#39;+$(&#39;#text&#39;).val()+&#39;</li>&#39;);
    });
});
</script>
</body>
</html>

Oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Beispielcode für Datepicker in Vue

So lösen Sie das Problem, dass die Website ohne Anmeldung keine Inhalte kopieren kann

Das Datepicker-Plug-in in Vue kann den Wert des Datepicker-Eingabefelds nicht überwachen

Detaillierte Beschreibung der Abstraktion zwischen Komponenten in React

NavigatorIOS-Komponente in React Native (ausführliche Tutorialbeschreibung)

Informationen zur Verwendung der ejsExcel-Vorlage

Das obige ist der detaillierte Inhalt vonSo fügen Sie dynamisch einer Liste in jQuery hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery 事件 react native

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Lokale JavaScript-ObjekteNächster Artikel：Lokale JavaScript-Objekte

In Verbindung stehende Artikel

Mehr sehen