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

【问题标题】：How to add text to an existing div with jquery如何使用 jquery 将文本添加到现有的 div
【发布时间】：2013-03-22 22:46:22
【问题描述】：

当我单击 ID 为 #add 的按钮时，我想向现有 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>

我希望你能帮助我。

【问题讨论】：

标签： jquery html text add

【解决方案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 某处速度变慢。

【讨论】：

jquery .replaceWith() 方法通过一次调用从 DOM 中删除内容并在其位置插入新内容。 $( "div.second" ).replaceWith( "<h2>New heading</h2>" );jquery api

【解决方案2】：

运行示例：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：