Maison > Article > interface Web > Comment ajouter dynamiquement à une liste dans jQuery
Comment ajouter dynamiquement à une liste dans jQuery
- 亚连original
- 2018-06-15 15:31:423101parcourir
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 () {
$('#btn').click(function () {
$('ol').append('<li>'+$('#text').val()+'</li>');
});
});
</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 connexes :
Exemple de code pour le sélecteur de date dans Vue
Le plug-in datepicker dans Vue ne peut pas surveiller la valeur de la zone de saisie datepicker
Description détaillée de l'abstraction entre les composants dans React
Composant NavigatorIOS dans React Native (description détaillée du didacticiel)
À propos de l'utilisation du modèle ejsExcel
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!