为什么这个li没有转换为replaceWith？

Question

$('li').click(function() {
    $(this).replaceWith('<form><input[type="text"]>cool stuff</input></form>');
});

当我使用此代码时，中间的文本显示，但不是我正在寻找的文本框。我该如何解决这个问题？

Answer 1

这是因为您替换li的HTML无效：

$('li').click(function() {
    $(this).replaceWith('<form><input type="text">cool stuff</form>');
});

Working example

另请注意，将li替换为form无效，因为只有li个元素可以是ol或ul的直接子级。相反，您可以empty()当前li，然后append()新form，或者只使用html()执行此操作：

$('li').click(function() {
    $(this).html('<form><input type="text">cool stuff</form>');
});