title: Insert a form into a page using jquery?
body: <p>I'm using jquery to insert a hidden form into a page (once the page has already loaded). For some reason the code is not working. Here is a sample of the code:</p>
  
  <pre><code>$(function(){
      $('body')
          .append('&lt;form id="mySearch"&gt;&lt;/form&gt;'); //append a new form element with id mySearch to &lt;body&gt;
      $('#mySearch') 
          .attr("action","mySearchPage.cfm") .attr("method","post") //set the form attributes
          //add in all the needed input elements
          .append('&lt;input type="hidden" name="btnSearch" id="btnSearch" value="Search"&gt;')
          .append('&lt;input type="hidden" name="txtField1" id="txtField1" value=""&gt;')
          .append('&lt;input type="hidden" name="txtField2" id="txtField2" value=""&gt;')
          .append('&lt;input type="hidden" name="selType" id="selType" value="0"&gt;')
          .append('&lt;input type="hidden" name="selType2" id="selType2" value="2"&gt;')
  });
  </code></pre>
  
  <p>The form is not being inserted into the body of the page. What am I doing wrong?</p>
  
  <p>Update: I've found that when I use the code in a page on it's own it works correctly. When I try to integrate it into a large, already existing page it no longer works. Any ideas about what might cause the exact same code to fail?</p>