How to replace one html element with another

Question

I'm trying to replace a form inside a div with jQuery, consider following html:

<div>
  <form>
    <input type="text" value="some text here" id="friendship" class="not_friends">
  </form>
</div>

and following js code:

div = $("#friendship.not_friends").parent().parent();
$("form", div).remove();
$(div).add(response);

the "form" element is removed, as I want, but the new form (in 'response' string) isn't added to div, why ? and there's a better way to write this js code ? this looks not good for me.

Answer 1

jQuery has built in functionality for replacing one element with another.

See: .replaceWith()

http://api.jquery.com/replacewith/

$("form").replaceWith(response);

Answer 2

You need to use .append()/.html()

$(div).append(response);

.add() returns a new jQuery object with the current object and the objects returned by the selector passed