如何使用 jquery 向现有 div 添加文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15581059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add text to an existing div with jquery
提问by JSt
I want to add text to an existing div, when I click the Button with the id #add. But this is not working.
当我单击带有 id #add 的按钮时，我想向现有 div 添加文本。但这是行不通的。
Here my code:
这是我的代码：
$(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>I hope you can help me.
我希望你能帮助我。
回答by bretterer
You need to define the button text and have valid HTML for the button. I would also suggest using .onfor the click handler of the button
您需要定义按钮文本并为按钮提供有效的 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>Also I would make sure the jquery is at the bottom of the page just before the closing </body>tag. Doing so will make it so you do not have to have the whole thing wrapped in $(functionbut I would still do that. Having your javascript load at the end of the page makes it so the rest of the page loads incase there is a slow down in your javascript somewhere.
此外，我会确保 jquery 位于页面底部的结束</body>标记之前。这样做会让你不必把整个事情都包起来，$(function但我仍然会这样做。在页面末尾加载 javascript 可以使页面的其余部分加载，以防您的 javascript 在某处变慢。
回答by Zach dev
Running example:
运行示例：
//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>回答by Musa
Your html is invalid buttonis not a null tag. Try
您的 html 无效button不是空标签。尝试
<div id="Content">
<button id="Add">Add</button>
</div>
回答by Amit Joshi
we can do it in more easy way like by adding a function on button and on click we call that function for 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>
回答by Pavan
Very easy from My side:-
从我这边来说很容易：-
<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>
回答by prakash tyata
$(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>