なぜこの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。代わりに、あなたはそれにappend()新しいform、その後、現在のliをempty()、あるいは単にこれを行うにhtml()を使用することができます動作しますが、今私はフィールドに入力することはできません

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