Javascript Girl
  1. Javascript Girl
  3. Comment ajouter un bouton dynamiquement à l'aide de jquery
Intereting Posts
Rails 3 Ajax Recherche AngularJS ajoute à l'historique du navigateur sans rechargement de page et sans HTML5 pushstate Le dépassement de pile fonctionne mieux avec la bannière JavaScript activée Vérification de l'e-mail de javascript Vérification du problème de condition Comment détecter quand l'utilisateur s'est déplacé vers une certaine zone sur la page en utilisant jQuery? JQuery: Comment appeler une fonction de plugin jQuery sur un élément qui n'a pas encore été ajouté au DOM? JQuery Bounce Effect sur la touche jQuery UI Une question simple sur la fermeture de jquery Résultats du projet Firebase dans l'erreur "Auth / network-request-failed" lors de la connexion Tirez et utilisez les données JSON à partir d'une URL avec JavaScript Phonegap InAppBrowser afficher pdf 2.7.0 Comment le nœud résout-il un emplacement de module lorsqu'il est requis d'un autre module? Comment puis-je créer un script Greasemonkey pour télécharger automatiquement un fichier? Ajouter un marqueur à une image en javascript? Différence entre les types de contenu application / x-javascript et texte / javascript

Comment ajouter un bouton dynamiquement à l'aide de jquery

Ma tâche est d'ajouter un bouton dynamiquement à la div … Voici le code que je suivez pour ajouter un bouton de façon dynamique mais ne fonctionne pas s'il vous plaît me donner une solution pour cela 

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> function test() { var r = "$('<input/>').attr({ type: "button", id: "field" })"; } $("body").append(r); </script> </head> <body> <button onclick="test()">Insert after</button> </body> </html>

Code pour ajouter le bouton sur div lorsque la page se charge mais ne fonctionne pas 

 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> function test() { var r=$('<input/>').attr({ type: "button", id: "field" }); test().append("#test"); } </script> </head> <body> <div id="test"></div> <button id="insertAfterBtn" onclick="test()">Insert after</button> </body> </html>

Votre ligne d'ajout doit être dans votre fonction test()

MODIFIER:

Voici deux versions:

Version 1: jQuery listener 

 $(function(){ $('button').on('click',function(){ var r= $('<input type="button" value="new button"/>'); $("body").append(r); }); });

DEMO ICI

Version 2: avec une fonction (comme votre exemple) 

 function createInput(){ var $input = $('<input type="button" value="new button" />'); $input.appendTo($("body")); }

DEMO ICI

Remarque: Ceci peut être fait soit avec .appendTo ou avec .append .

L'énoncé $("body").append(r) devrait être dans la fonction de test , aussi il y avait mal placé " dans la méthode de test 

 function test() { var r=$('<input/>').attr({ type: "button", id: "field", value: 'new' }); $("body").append(r); }

Demo: Fiddle

Mettre à jour
Dans ce cas, essayez une solution plus jQuery-ish 

 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $('#mybutton').one('click', function(){ var r=$('<input/>').attr({ type: "button", id: "field", value: 'new' }); $("body").append(r); }) }) </script> </head> <body> <button id="mybutton">Insert after</button> </body> </html>

Demo: Plunker

Essaye ça: 

 <script type="text/javascript"> function test() { if($('input#field').length==0) { $('<input type="button" id="field"/>').appendTo('body'); } } </script>

Essaye ça 

 function test() { $("body").append("<input type='button' id='field' />"); }

Travailler ici .

Pour ajouter la nouvelle entrée une seule fois, utilisez le code suivant: 

 $(document).ready(function() { $("#insertAfterBtn").one("click", function(e) { var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" }); $("body").append(r); }); });

[… source déchirée ici] 

 <body> <button id="insertAfterBtn">Insert after</button> </body>

[… source déchirée ici]

Pour le faire fonctionner dans l'éditeur w3, copiez / collez le code ci-dessous dans la section 'code source' à l'intérieur de l'éditeur w3, puis appuyez sur 'Envoyer le code': 

 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <button id="insertAfterBtn">Insert only one button after</button> <div class="myClass"></div> <div id="myId"></div> </body> <script type="text/javascript"> $(document).ready(function() { // when dom is ready, call this method to add an input to 'body' tag. addInputTo($("body")); // when dom is ready, call this method to add an input to a div with class=myClass addInputTo($(".myClass")); // when dom is ready, call this method to add an input to a div with id=myId addInputTo($("#myId")); $("#insertAfterBtn").one("click", function(e) { var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" }); $("body").append(r); }); }); function addInputTo(container) { var inputToAdd = $("<input/>", { type: "button", id: "field", value: "I was added on page load" }); container.append(inputToAdd); } </script> </html>