jquery - Jqueryは、送信のオンクリックでdivを表示します

Question

ボタンをクリックすると、コンテンツを含む div を表示する必要があります

HTML

<input type="submit" id="but">​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JS

$("#but").click(function () {
    alert("h");
    $(this).html('<div>test</div>');​
});

しかし、これはうまくいきません</p>

Answer 1

DOMに追加する場合は、次のように<div>します。

$("#but").click(function() {
    $("<div>test</div>").appendTo("body");
});

注: 代わりに、body他のコンテナーを使用することもできます。

ボタンを<div>ブロックに置き換える必要がある場合は、次を使用しますreplaceWith。

$("#but").click(function() {
    $(this).replaceWith("<div>test</div>");
});

Answer 2

入力はcontainer使用しないafterかbefore、

$("#but").click(function () {
    $(this).after('<div>test</div>');
});

デモ: jsfiddle.net/5pt5r/

Answer 3

ポストバックを引き起こす送信タイプの入力ボタンを使用しました。そのため、jquery を試行しようとすると機能しますが、ページがポストバックされるため、機能していないように見えます。input type='button' を使用すると機能します。