Jquery显示提交的div onclick

Question

当我点击一个按钮时，我将显示一个包含内容的div

HTML

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

JS

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

但这不起作用

Answer 1

如果您要将<div>添加到DOM，请使用以下命令：

$("#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'然后它将起作用。