title: how to change an input element to textarea using jquery
body: <p>I have the following html:</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="text" style="xxxx" size="40"/&gt;
      &lt;input type="text" style="xxxx" size="100"/&gt;
      &lt;input type="text" style="xxxx" size="100"/&gt;
      &lt;input type="text" style="xxxx" size="40"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to change each input whose size is '100' to a textarea which has the same style as the input.</p>
  
  <p>I have tried this:</p>
  
  <pre><code>$("input[size=100]").each(function(){
    //how to replace it?
  });
  </code></pre>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <p>I used this solution found in the answers <a href="https://stackoverflow.com/a/9112502/306719">here</a>:</p>
  
  <pre><code>$("input[size=100]").each(function() {
      var style = $(this).attr('style'), textbox = $(document.createElement('textarea')).attr({
          id : $(this).id,
          name : $(this).name,
          value : $(this).val(),
          style : $(this).attr("style"),
          "class" : $(this).attr("class"),
          rows : 6
      }).width($(this).width());
      $(this).replaceWith(textbox);
  });
  </code></pre>