Javascript 输入值更改时html（）方法错误

本质上，我有一些代码需要在父元素的任何输入元素模糊时获取其HTML。这很简单。问题在于，在父元素上调用

HTML（）

时返回的HTML不能反映其中包含的输入元素的当前值。也就是说，在Firefox或Chrome中。它适用于所有地方

以下是JSFIDLE：

尝试将文本框中的“世界”更改为“所有人”，然后单击按钮。请注意，我还添加了

$.now（）

，以便您可以看到代码实际上正在执行

如您所见，

$（“#parent”）.html（）

不会更新，即使

$（“#child”）.val（）会更新。
为了给您带来观看的乐趣，以下是HTML：

<div id="parent">Hello <input type='text' id="child" value='world' /></div>
<button id="separateEvent">Get HTML.</button>
<br>
<p>The HTML for #parent is:</p>
<textarea id="parentsHtml" style="width:95%; height: 100px;"></textarea>
<p>The value of #child is:</p>
<textarea id="childsValue" style="width:95%; height: 100px;"></textarea>

html
value=”“
属性不反映
.value
DOM属性（非直观），但反映
.defaultValue
DOM属性。
.value
属性未序列化为HTML，但
.defaultValue
为

用户输入更改
.value
，而不是
.defaultValue

.value
仅在输入

这里有一个变通方法，其中还包括一个选择框示例：
更改属性不会更改源html。无论如何，你想用它来完成什么？我认为值得指出的是，如果你在浏览器工具中检查元素，同样的事情也会发生。Chrome tools仍然在HTML中报告“world”值，即使该值本身已更改。根据我的经验，通过
.HTML（）
操作DOM很少是最好的方法。对于那些遇到相同问题但有选择（下拉列表）的人，我已更新了Esailija的示例以包含这些内容。也许有一个更好的解决方案，但这一个确实起到了作用：@Grinn实际上同样的原则也适用于这里，只适用于
.selected
和
.defaultSelected
：如果你想知道收音机和复选框，
.checked
和
。defaultChecked
@esailja哦，太棒了！我的目标是犹太人区，所以我很高兴有更好的地方。
$("#separateEvent").click(function ()
                         {
                             $("#parentsHtml").val($("#parent").html() + "\r\n@" + $.now());
                             $("#childsValue").val($("#child").val() + "\r\n@" + $.now());
                         });