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.
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.
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>');
});
});
Votre code HTML est invalide button
n'est pas une balise nulle. Essayer
<div id="Content">
<button id="Add">Add</button>
</div>
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>
$(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>
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>