title: how to replace html block of codes with another block of codes with inline css in jquery?
body: <p>I tried to replace block of html codes replace with another block of html. but i could not do it.</p>
  
  <p>this is the html block</p>
  
  <pre><code>&lt;div id="book1"&gt;
      &lt;div class="page1" style="background: url(modules/mod_test/tmpl/img/new/1.jpg); width:100%;"&gt;&lt;/div&gt;
      &lt;div class="page2" style="background: url(modules/mod_test/tmpl/img/new/2.jpg); width:100%;"&gt;&lt;/div&gt;
      &lt;div class="page3" style="background: url(modules/mod_test/tmpl/img/new/3.jpg); width:100%;"&gt;&lt;/div&gt;
      &lt;div class="page4" style="background: url(modules/mod_test/tmpl/img/new/4.jpg); width:100%;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with this code block</p>
  
  <pre><code>&lt;div id="book2"&gt;
      &lt;div class="page1" style="background: url(modules/mod_test/tmpl/img/new/new1.jpg); width:100%;"&gt;&lt;/div&gt;
      &lt;div class="page2" style="background: url(modules/mod_test/tmpl/img/new/new2.jpg); width:100%;"&gt;&lt;/div&gt;
      &lt;div class="page3" style="background: url(modules/mod_test/tmpl/img/new/new3.jpg); width:100%;"&gt;&lt;/div&gt;
      &lt;div class="page4" style="background: url(modules/mod_test/tmpl/img/new/new4.jpg); width:100%;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i tried this with this code but it not working</p>
  
  <pre><code>$(document).ready(function() {
      $('.test-img').click(function () {
          var lookbook2 = '&lt;div class="page1" style="background: url(../images/book2/new1.jpg); width:100%;"&gt;&lt;/div&gt;' + '&lt;div class="page1" style="background: url(../images/book2/new2.jpg); width:100%;"&gt;&lt;/div&gt;';
          $('#book1').append(lookbook2);
      });
  </code></pre>
  
  <p>Can anyone help me?</p>