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

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">Add</button>
 </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

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

如果你想要在buttom之后

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

或之前

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

Answer 3

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

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