带有输入值的内部 HTML答案

【问题标题】：Inner HTML with input values带有输入值的内部 HTML
【发布时间】：2012-08-21 00:39:03
【问题描述】：

有一个关于 innerHTML 和已输入的输入值的简短问题。请参阅下面的简短示例（为方便起见，使用 jQuery）：

jQuery：

jQuery(document).ready(function($) {
    $('.send').click(function() {
        alert( $('.content').html() );
        return false;
    });
});

html：

<div class="content">
    <input type="text" name="input" value="Old Value" />
    <input type="button" class="send" value="Send" />
</div>

如果您编辑输入值，然后单击“发送”按钮，则警报显示获取的 innerHTML 包含具有“旧值”的输入，而不是用户输入的值。为什么是这样？我们如何才能将 HTML 作为字符串与用户输入的输入值一起获取？

【问题讨论】：

标签： javascript jquery user-input innerhtml

【解决方案1】：

新值存储为属性而不是属性，值可以通过inputelement.value获取，修改值不影响属性。如果您想要具有新值的 html，只需将属性设置为新值即可。

为复选框和单选按钮设置选中属性，为文本区域设置innerHTML，为选择设置选项上的选定属性

http://jsfiddle.net/mowglisanu/F7urT/5/

【讨论】：

谢谢，很简单，但出于某种原因，我没有想到。其他类型的表单域呢？选择框，文本区域等？问题应该提到这一点，而不是严格输入；我很抱歉。
谢谢。很简单，真的应该自己解决这个问题。固执导致我浪费时间试图弄清楚 InnerHTML 发生了什么，而不是实现一个简单的解决方案。再次感谢。相信它实际上得到了当前的 HTML，包括任何更改的输入值等，而不是从字面上读取源代码。

【解决方案2】：

这个解决方案更好。适用于更多输入。

  $('input[type=text]').attr('value', function (i, val) { return val; });
  $('input[type=checkbox],input[type=radio]').attr('checked', function () { return this.checked; });
  $('textarea').html(function () { return this.value; });
  $('select').find(':selected').attr('selected', 'selected');

【讨论】：

【解决方案3】：

您无法通过 .innerHTML (.html()) 获得它。写入元素不会修改 html 标记，也不会更改实际标记中的 value 属性。

您只能通过直接向元素询问其.value 值来访问当前内容。使用 jQuery，您也可以通过 .val() 来实现。

【讨论】：

【解决方案4】：

$('#input_id').attr('value',$('#input_id').val());
会将值放入html中

【讨论】：

【解决方案5】：

DanCZ 和 Musa 解决方案效果很好，但我在使用 textarea 时遇到了问题。

我必须在 Typescript 项目中实现这一点，我发现让 textarea 显示值的唯一方法是：

textarea.innerHTML = textarea.value;

【讨论】：