Maison >interface Web >js tutoriel >Comment ajouter dynamiquement à une liste dans jQuery

Comment ajouter dynamiquement à une liste dans jQuery

亚连original: 2018-06-15 15:31:423220parcourir

Cet article présente principalement la méthode simple de jQuery pour ajouter dynamiquement de nouveaux éléments à une liste, impliquant des techniques d'implémentation liées à la réponse aux événements jQuery et au fonctionnement dynamique des éléments de page. Les amis dans le besoin peuvent se référer à ce qui suit

Cet article. décrit les exemples jQuery implémente simplement la méthode d'ajout dynamique de nouveaux éléments à une liste. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetez d'abord un œil aux rendus :

Le code d'implémentation complet est le suivant :

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus