title: DOM Elements created in JavaScript function disappear after function returned
body: <p>I have a dropdown list with multiple selections allowed.  A user selects from the list and then clicks the submit button with an onclick=test() which calls a JS function.  I am using Jsp pages, and this is a Spring MVC framework project with DWR for remote service.</p>
  
  <p>The data that's returned from the remote service - dwrService is handled by the callback function - handleAddSuccess.  Based on the item(s) selected, I need to populate one or more textareas.  From looking at Firebug, I see the textarea display and then being populated, but once the function, test() completes, the textarea disappears. I have been looking for answers everywhere, but no results.</p>
  
  <pre><code>function test() {
  var careIDs = dwr.util.getValue("careIDs");
  dwrService.getNewCares(careIDs, {
  callback : handleAddSuccess,
  errorHandler : handleAddError
  });
  }
  
  function handleAddSuccess(data) {
      var aFragment = document.createDocumentFragment();
      var divta1 = document.getElementById("divta1");
      for (i = 0; i &lt; data.length; i++) {
          var ta = document.createElement("textarea");
          ta.setAttribute("id", "definition"+i);
          ta.setAttribute("cols", "75");
          ta.setAttribute("rows", "75");
          divta1.appendChild(ta);
          aFragment.appendChild(divta1);
      }      
      document.body.appendChild(aFragment);
  
      for (i = 0; i &lt; data.length; i++) {
         dwr.util.setValue("definition"+i, data[i].definition);
      }
  alert(" end of handleAddSuccess " ) ;
  }
  </code></pre>
  
  <p>I have also returned from the callback function, and the case is the same - I could see the textarea elements being setup in Firebug and populated with values, but once the function returned, the textarea element disappears.</p>