Why isn't this li transforming on replaceWith?

Question

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

When i use this code, the text in the middle shows up, but not the text box I'm looking for. How do i fix this?

Answer 1

It's because the HTML you're replacing the li with is invalid:

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

Working example

Also note that replacing an li with a form is invalid as only li elements can be direct children of a ol or ul. Instead you could empty() the current li, then append() the new form to it, or just use html() to do this:

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