javascript - 将表单元素(输入)转换为 div

Question

有没有办法将所有输入字段转换为 div？或跨度或任何东西。我有一张像这样的 table :

<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>

我想将这个源复制到一个没有输入的灯箱..比如:

<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>

我想知道是否有一种方法可以通过使用 .replace 或其他方式将所有这些输入转换为 div？

谢谢

Answer 1

试试这个:

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

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

已更新，包括将内容复制到另一个带有 ID 灯箱的 div。