将表单元素（输入）转换为 div答案

【问题标题】：converting form elements (inputs) to divs将表单元素（输入）转换为 div
【发布时间】：2011-07-15 22:30:31
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： javascript jquery input transform

【解决方案1】：

试试这个：

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

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

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

【讨论】：

我个人会这样做 - return $('
').text($(this).val()) - 确保输入字段中的任何 HTML 不得到渲染。
另外，你用的是什么版本的jquery？
其更改的原始 html 源。我的内容有几个灯箱，其中一个正在计算..另一个用于打印..我试过了，但它对原始来源有影响..我尝试了一些吸引力，但我收到了 [object, object]
检查，更新。它现在会将内容复制到另一个 div 然后更改它。您可以用您需要的任何元素 ID 替换 #lightbox。
现在我正在尝试：var a= $('#calc').html(); $("input",a).each(function(){ this.outerHTML = "
" + this.value+ "
"; }); PrintPopUp(a)

【解决方案2】：

假设您没有使用任何库：

在这里http://www.w3schools.com/jsref/dom_obj_all.asp，你可以找到一些有用的功能来做到这一点。

通过获取您需要的输入元素，如下所示：

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

你可以用这个替换它们：

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

在我上面的链接中，您可以找到一些函数来替换子项或查找父项，删除当前子项，然后自己附加您的 div。

【讨论】：

哦，对不起，我忘了说我使用 jquery，我把它写到标签但忘了在描述中使用。

【解决方案3】：

如果您使用的是 jquery，您可以执行以下操作。

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btnChange").click(function () {
            $("#calc :input").each(function () {
                this.outerHTML = "<div>" + this.value+ "</div>";
            });
        });
    });
</script>

<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>
<input type="button" id="btnChange" value="Change" />

【讨论】：

它影响了原始内容，但我想将该内容复制到另一个灯箱。 InfernalBadger 的解决方案有效.. 谢谢