Remove, Append, and Resize Using jQuery
If i'm understanding your question correctly what you have is pretty much there already. The only change I can suggest is to let your HTML establish the relationship between your trigger button and the template containing your new HTML like so:

http://jsfiddle.net/vax6hp28/5/

HTML

&lt;div class="container"&gt;
    &lt;button data-target="#template-addText"&gt;Click Me&lt;/button&gt;
&lt;/div&gt;

&lt;script id="template-addText" type="text/template"&gt;
    &lt;p&gt;I've replaced the button and in a very smooth fashion!&lt;/p&gt;
    &lt;p&gt;Holla!&lt;/p&gt;
&lt;/script&gt;


Javascript

var appendResize = function(e) {
    var parent = $(this).parent();
    var oldHeight = parent.height();
    var templateRef = $($(this).data('target'));

    $(this).fadeOut(400, function() {
        this.remove();

        var template = templateRef.html();
        var paragraph = $(template).appendTo(parent);
        var newHeight = parent.height();

        paragraph.fadeIn(2000);
        parent.height(oldHeight).animate({height: newHeight});
    });
}

$(document).on('click', 'button', appendResize);


This allows you to create as many buttons/template combinations as you like without having to change the javascript.