web-dev-qa-db-fra.com

Comment ajouter du texte à une div existante avec jquery

Je veux ajouter du texte à une div existante, lorsque je clique sur le bouton portant l'id #add. Mais ça ne fonctionne pas. 

Voici mon code: 

$(function () {
  $('#Add').click(function () {
    $('<p>Text</p>').appendTo('#Content');
  });
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div id="Content">
    <button id="Add" />
 </div>

J'espère que vous pouvez m'aider. 

jqueryhtmltextadd
50
JSt

Vous devez définir le texte du bouton et disposer d'un code HTML valide pour le bouton. Je suggérerais également d’utiliser .on pour le gestionnaire de clic du bouton

$(function () {
  $('#Add').on('click', function () {
    $('<p>Text</p>').appendTo('#Content');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="Content">
    <button id="Add">Add Text</button>
</div>

Je voudrais également m'assurer que la requête est au bas de la page juste avant la balise </body> de fermeture. Cela ferait en sorte que vous n'ayez pas à tout emballer dans $(function mais je le ferais quand même. Le chargement de votre javascript à la fin de la page permet de charger le reste de la page en cas de ralentissement de votre javascript quelque part.

52
bretterer

Html

<div id="Content">
<button id="Add" value="Add" />
</div>

si tu veux après le cul

$(function () {
  $('#Add').click(function () {
    $('#Content').after('<p>Text</p>');
  });
});

ou avant

$(function () {
  $('#Add').click(function () {
    $('#Content').before('<p>Text</p>');
  });
});
9
Zach dev

Votre code HTML est invalide button n'est pas une balise nulle. Essayer

<div id="Content">
   <button id="Add">Add</button>
</div>
5
Musa

Très facile de mon côté: -

<html>
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("input").click(function() {
            $('<input type="text" name="name" value="value"/>').appendTo('#testdiv');
        });

    });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="testdiv"></div>
    <input type="button" value="Add" />
</body>
</html>
0
Pavan

$(function () {
  $('#Add').click(function () {
    $('<p>Text</p>').appendTo('#Content');
  });
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div id="Content">
    <button id="Add">Add<button>
 </div>

0
prakash tyata

nous pouvons le faire de manière plus simple, comme en ajoutant une fonction sur un bouton et en cliquant, nous appelons cette fonction pour l'ajouter.

<div id="Content">
<button id="Add" onclick="append();">Add Text</button>
</div> 
<script type="text/javascript">
function append()
{
$('<p>Text</p>').appendTo('#Content');
}
</script>
0
Amit Joshi