59

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>

あなたが私を助けてくれることを願っています。

4

6 に答える 6

62

ボタンのテキストを定義し、ボタンの有効な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>

</body>また、jqueryがページの下部の終了タグの直前にあることを確認します。そうすることで、すべてを包む必要がないようになりますが、$(functionそれでも私はそうします。ページの最後にJavaScriptをロードすると、JavaScriptのどこかで速度が低下した場合に備えて、ページの残りの部分がロードされます。

于 2013-03-22T22:51:26.193 に答える
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>

于 2013-03-22T22:51:22.270 に答える
5

HTMLが無効buttonです。nullタグではありません。試す

<div id="Content">
   <button id="Add">Add</button>
</div>
于 2013-03-22T22:49:19.077 に答える
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>
于 2016-05-27T17:24:08.683 に答える
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>
于 2016-03-25T10:56:23.340 に答える