So fügen Sie dynamisch einer Liste in jQuery hinzu-js-Tutorial-php.cn

So fügen Sie dynamisch einer Liste in jQuery hinzu

亚连

Freigeben： 2018-06-15 15:31:42

Original

3099 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!