Maison > Article > interface Web > Les soldats de la liste d'actions jQuery y ajoutent dynamiquement de nouveaux éléments

Les soldats de la liste d'actions jQuery y ajoutent dynamiquement de nouveaux éléments

php中世界最好的语言original: 2018-04-19 14:00:021439parcourir

Cette fois, je vais vous présenter jQuery pour ajouter dynamiquement de nouveaux éléments à une liste de soldats, et quelles sont les précautions pour utiliser jQuery pour ajouter dynamiquement de nouveaux éléments à une liste de soldats. Voici quelques exemples de cas pratiques.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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 () {
    $('#btn').click(function () {
      $('ol').append('<li>'+$('#text').val()+'</li>');
    });
});
</script>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Utilisez JS pour renvoyer le code de vérification après 60 secondes

Traversée et interception de chaînes JS, Opérations de sortie et de calcul

JS implémente une fonction de chargement et de pagination illimitée sur le terminal mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php jquery 字符串 JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation du plug-in jQuery MagnifyArticle suivant：Explication détaillée de l'utilisation du plug-in jQuery Magnify

Articles Liés

Voir plus