converting form elements (inputs) to divs

Question

is there a way to transform all inputs field to divs? or span or anything. i have a table like:

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>

and i want copy this source to a light box without inputs.. like:

<table>
<tr>
<td>Principal:</td>
<td><div>100.00$</div></td>
</tr>
<tr>
<td>start date:</td>
<td><div>02/02/2002</div></td>
</tr>
<tr>
<td>end date:</td>
<td><div>02/02/2002</div></td>
</tr>
</table>

i wonder is there a way to convert all those inputs to divs may be via using .replace or something else ?

thanks

Answer 1

Try this:

$('#calc').clone().appendTo('#lightbox');
$('#lightbox input').replaceWith(function() {
    return $('<div>' + $(this).val() + '</div>');
});

jsfiddle - http://jsfiddle.net/infernalbadger/c9Rub/2/

Updated to include copying the content to another div with the ID lightbox.

Answer 2

Assuming that you are not using any libs:

Here http://www.w3schools.com/jsref/dom_obj_all.asp, you can find some useful functions to do this.

By getting the input elements that you need, something like this:

var inputs = document.getElementsByTagName('input');

You can replace them with this:

  //pseudo
  for each input element
    var parentNode = input.parentNode;
    parentNode.removeChild(input);
    parentNode.innerHTML('<div>' + input.value + '</div>');

In the link that I put above, you can find some functions either to replace child or either to findParent, remove the current child and then append your div by yourself.