Почему этот li не преобразуется на replaceWith?

Question

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

Когда я использую этот код, появляется текст в середине, но не текстовое поле, которое я ищу. Как это исправить?

Answer 1

Это потому, что HTML вы заменить li с недействителен:

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

Working example

Также отметим, что замена li с form является недействительным, как только li элементы могут быть прямыми потомками a ol или ul. Вместо того, чтобы вы могли empty() текущий li, затем append() новый form к нему, или просто использовать html(), чтобы сделать это:

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