Question

当我单击ID为#add的Button时，我想将文本添加到现有div中。但这不起作用。

这是我的代码：

$(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>

我希望你能帮助我。

Answer 1

您需要定义按钮文本并为按钮提供有效的HTML。我还建议使用.on作为按钮的点击处理程序

$(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>

另外，我会确保jquery位于结束</body>标记之前的页面底部。这样做会使你不必将整个事情包裹在$(function中，但我仍然会这样做。将javascript加载到页面末尾会使页面的其余部分加载，因为某个地方的javascript速度会变慢。

Answer 2

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>');
  });
});

Answer 3

您的html无效button不是空标记。尝试

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

Answer 4

我们可以通过在按钮上添加一个函数来更轻松地完成它，点击后我们调用该函数进行追加。

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

Answer 5

从我这边很容易： -

<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>

Answer 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>

如何使用jquery将文本添加到现有div

6 个答案: