span - Cómo agregar texto a un div existente con jquery
insertar codigo html con jquery (6)
Quiero agregar texto a un div existente, cuando hago clic en el botón con el ID #add. Pero esto no está funcionando.
Aquí mi código:
$(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>
Espero que puedas ayudarme.
Debe definir el texto del botón y tener un código HTML válido para el botón. También sugeriría usar .on para el controlador de clic del botón
$(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>
También me aseguraría de que el jquery esté en la parte inferior de la página justo antes de la etiqueta de cierre </body> . Hacerlo lo hará para que no tenga que envolver todo en $(function pero aún así lo haría. Tener la carga de javascript al final de la página lo hace para que el resto de la página cargue en caso de que haya una ralentice en su javascript en alguna parte.
Html
<div id="Content">
<button id="Add" value="Add" />
</div>
si quieres después del botón
$(function () {
$(''#Add'').click(function () {
$(''#Content'').after(''<p>Text</p>'');
});
});
o antes
$(function () {
$(''#Add'').click(function () {
$(''#Content'').before(''<p>Text</p>'');
});
});
Muy fácil desde mi lado: -
<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>
Su html es un button no válido, no es una etiqueta nula. Tratar
<div id="Content">
<button id="Add">Add</button>
</div>
podemos hacerlo de una manera más fácil, como al agregar una función en el botón y al hacer clic, llamamos a esa función para agregar.
<div id="Content">
<button id="Add" onclick="append();">Add Text</button>
</div>
<script type="text/javascript">
function append()
{
$(''<p>Text</p>'').appendTo(''#Content'');
}
</script>
$(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>