如何使用jQuery向现有的div添加文本

Question

如何使用jQuery向现有的div添加文本

jqueryhtmltextaddition

61

我想在单击id为#add的按钮时向现有的div添加文本，但这不起作用。

这是我的代码：

我想在单击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>

我希望你可以帮助我。

- JSt

6个回答

11

运行示例：

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

- Zach dev

5

您的HTML无效，button不是一个空标签。请尝试：

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

- Musa

0

我的角度非常简单：

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

- Pavan

0

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

- prakash tyata

0

我们可以更简单地完成它，例如通过在按钮上添加一个函数，在点击时调用该函数进行追加。

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

- Amit Joshi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bretterer · Accepted Answer

你需要定义按钮文本，并为按钮提供有效的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出现缓慢时先加载其他内容。