jQuery: Forcing to fadeOut() first and then prepend() div -

On this page, when you click on text, div1 must be fade out and delete itself and div2 Must be visible. The thing script prepends div2 first and then div1 fades out.

1. This is the easiest matter of my problem. Do not suggest changing text or alternate options since my webpage, which I am trying to implement, it is mandatory to exchange the deal (the device has a lot of data).
2. Prepaid me (), no app () or add to () suggestion

   Thanks in advance.

   index.html

      & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
     script.js   
     $ (document) .ready (function () {$ (document) .on (" Click "," # text1 ", function () {$ (" # div1 ") .Fedhat (function () {$ (this) .remove ();}) $ $ (" body "). Prepaid (" & Lt; $ Id = 'div2' & gt; & lt; / div & gt; "); $ (" # div2 ") .hide () .append (" & lt; h1 id = 'text2' & gt; It is div2  ") ($ (" # div2 "; $ (" body "). $ (" Div id = 'div1' & gt; & lt; / div & gt; ; "); $ (" # Div1 ") .hide () .append (" & lt; h1 id = 'text1' & gt; it div1 & lt; / div & gt; "). FadeIn ();}) ;});    
    
    
    Try this way:  
     $ (document). ("Click", "# text1", function () {$ ("# div1") Featut (function () {$ (this) .remove (); $ ("body"). Prepaid ("& lt; div id = 'div2' & gt; & lt; / div & gt;"); $ ("# Div2") .hide () .append ("& lt; h1 id = 'text2' & gt; it div2 & lt; / div & gt;".); Fade ();});});