jquery - Jquery显示一个div onclick提交

Question

当我单击一个按钮时，我必须显示一个包含内容的 div

HTML

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

JS

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

但这行不通​</p>

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

您采用了提交类型的输入按钮，这会导致回发。因此，当您尝试尝试任何 jquery 时，它可以工作，但页面会被回发，因此它似乎无法正常工作。使用 input type='button' 然后它将起作用。

Answer 3

输入不container使用after或before。

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

演示：jsfiddle.net/5pt5r/