如何将文本添加到与jQuery现有的div(How to add text to an existi

2019-07-22 18:57发布

我想将文本添加到现有的DIV,当我点击与ID#将按钮。 但是,这是行不通的。

在这里我的代码:

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



文章来源: How to add text to an existing div with jquery