Как изменить тип html элемента?

function changeTagName(el, newTagName) { 
  var n = document.createElement(newTagName); 
  var attr = el.attributes; 
  for (var i = 0, len = attr.length; i < len; ++i) { 
    n.setAttribute(attr[i].name, attr[i].value); 
  } 
  n.innerHTML = el.innerHTML; 
  el.parentNode.replaceChild(n, el); 
} 
 
changeTagName(document.getElementById('ex'), 'textarea');

<input class="field" id="ex" name="ex" type="text" value="" />

$("#ex").each(function (o, elt) { 
  var newElt = $("<textarea />"); 
  Array.prototype.slice.call(elt.attributes).forEach(function(a) { 
    newElt.attr(a.name, a.value); 
  }); 
  $(elt).wrapInner(newElt).children(0).unwrap(); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input class="field" id="ex" name="ex" type="text" value="">