title: Set form data without creating DOM inputs
body: <p>I have an empty <code>form</code> tag, and a function which generates 4000 hidden inputs which contains the data to be send by the form.</p>
  
  <p>Generating the 4000 hidden inputs is pretty fast (takes about <code>4ms</code>). However, the browser freezes for about 1 second when i am appending the hidden inputs in the form tag.</p>
  
  <p>I have also wrapped the hidden inputs in a <code>&lt;div/&gt;</code> tag, but doesn't helps too much.</p>
  
  <p>Is there any way to set the form data programmatically, without using the input DOM elements?</p>
  
  <p>Something like:</p>
  
  <pre><code>$form[0].setData([{ id: 1, value: "A" }, { id: 2, value: "B" }]);
  $form.submit();
  </code></pre>
  
  <p><strong>Here is the function which generates the hidden inputs</strong></p>
  
  <pre><code>function saveUIPositions() {
      var $form = $("#saveUIPositionsForm");
      $form.empty();
  
      console.time("ui");
  
      var array = [];
      array.push("&lt;div&gt;");
  
      var items = dataTable.dataView.getItems();
      for (var i = 0, len = items.length; i &lt; len; i++) {
          var item = items[i];
          var index = dataTable.dataView.getRowById(item.Id) + 1;
  
          array.push("&lt;input type='hidden' name='[");
          array.push(i);
          array.push("].Item_Id' value='");
          array.push(item.Id);
          array.push("' /&gt;");
  
          array.push("&lt;input type='hidden' name='[");
          array.push(i);
          array.push("].Index' value='");
          array.push(index);
          array.push("' /&gt;");
      }
  
      array.push("&lt;/div&gt;");
  
      console.timeEnd("ui");
  
      // here it gets very costly (and not because of array.join())
      $form.append(array.join(""));
  
      $form.submit();
  };
  </code></pre>