如何使用jQuery将文本添加到现有的div
我想添加文本到现有的div，当我点击ID为#add的button。 但是这不起作用。
在这里我的代码：
$(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>
我希望你能帮助我。
您需要定义button文本并为该button提供有效的HTML。 我也build议使用.on为button的点击处理程序
$(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>
HTML
<div id="Content"> <button id="Add" value="Add" /> </div>
如果你想在buttom之后
$(function () { $('#Add').click(function () { $('#Content').after('<p>Text</p>'); }); });
或之前
$(function () { $('#Add').click(function () { $('#Content').before('<p>Text</p>'); }); });
您的html无效button不是空标记。 尝试
<div id="Content"> <button id="Add">Add</button> </div>
我们可以通过在button上添加一个函数来更简单的方式来实现，单击我们将该函数称为append。
<div id="Content"> <button id="Add" onclick="append();">Add Text</button> </div> <script type="text/javascript"> function append() { $('<p>Text</p>').appendTo('#Content'); } </script>
从我身边很容易： –
<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>
