title: How to add a button dynamically using jquery
body: <p>My task is to add button dynamically to the div.. here is the code that i follow to add button dynamically but its not working please give me a solution for this   </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
           &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
           &lt;script type="text/javascript"&gt;
               function test() {
                  var r = "$('&lt;input/&gt;').attr({
                               type: "button",
                               id: "field"
                          })";
               }
               $("body").append(r);
           &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
           &lt;button onclick="test()"&gt;Insert after&lt;/button&gt; 
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>code to append button on div when page loads but its not working</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script&gt;
  function test() {
      var r=$('&lt;input/&gt;').attr({
          type: "button",
          id: "field"
  
      });
      test().append("#test");    
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="test"&gt;&lt;/div&gt;
   &lt;button id="insertAfterBtn" onclick="test()"&gt;Insert after&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>