Ik wil tekst toevoegen aan een bestaande div, wanneer ik op de knop klik met de id #add. Maar dit werkt niet.
Hier mijn 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">Add</button>
</div>Snippet uitvouwen
Antwoord 1, autoriteit 100%
U moet de knoptekst definiëren en geldige HTML voor de knop hebben. Ik zou ook aanraden om .onte gebruiken voor de klik-handler van de knop
$(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>Snippet uitvouwen
Antwoord 2, autoriteit 18%
Hardloopvoorbeeld:
//If you want add the element before the actual content, use before()
$(function () {
$('#AddBefore').click(function () {
$('#Content').before('<p>Text before the button</p>');
});
});
//If you want add the element after the actual content, use after()
$(function () {
$('#AddAfter').click(function () {
$('#Content').after('<p>Text after the button</p>');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="Content">
<button id="AddBefore">Add before</button>
<button id="AddAfter">Add after</button>
</div>Snippet uitvouwen
Antwoord 3, autoriteit 8%
Uw html is ongeldig buttonis geen null-tag. Probeer
<div id="Content">
<button id="Add">Add</button>
</div>
Antwoord 4
we kunnen het op een eenvoudigere manier doen, zoals door een functie toe te voegen aan de knop en bij klikken noemen we die functie voor toevoegen.
<div id="Content">
<button id="Add" onclick="append();">Add Text</button>
</div>
<script type="text/javascript">
function append()
{
$('<p>Text</p>').appendTo('#Content');
}
</script>
Antwoord 5
Heel gemakkelijk van mijn kant:-
<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>
Antwoord 6
$(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>