title: Appending a div onclick
body: <p>I have a button and a div, i want to append this div <strong>once</strong> every time i click on the button, but i have a problem, the HTML code for this div is very large and i don't want that, so my question is there another method to append this div without putting the whole code in my js code? and another problem i want to append the div once only on each click but it appends it multiple times, Here is an example of what I'm talking about, i replaced my large HTML code with a small one, so here is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".appendbtn").click(function () {
     $(".appendme").append('&lt;div class="appendme"&gt;The div that should be appended&lt;/div&gt;');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script
    src="https://code.jquery.com/jquery-2.2.3.min.js"
    integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
    crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;div class="appendme"&gt;The div that should be appended&lt;/div&gt;
  &lt;button class="appendbtn" type="button"&gt;Click to append&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>