反映容器jquery对象中的子元素更改

我有一个div容器，它有一个输入和按钮。我想用jquery给输入一个值。设置值后，如何“刷新”容器以使输入具有新值：

<div id="loginField">
    <label>User ID
        <input type="text" id="userID" value="" />
    </label>
        <button id="submitUserId" value="accept">Continue</button>
</div>

如果您检查控制台，您可以看到在打印出容器时输入没有值。JSFIDLE是

我希望对容器中的子元素进行任何更改以刷新容器，以便容器[0].outerHTML将包含输入的新值。例如，打印前后的容器应如下所示：

<div id="loginField">
<label>User ID
    <input type="text" id="userID" value="">
</label>
    <button id="submitUserId" value="accept">Continue</button>
</div> 

用户ID
继续

在注入输入值“demo”后：

用户ID
继续

注意，输入值现在已更改。最干净的方法是什么？

比使用：

var container  = $('#loginField');

console.log('container[0].outerHTML  is ');
console.log(container[0].outerHTML );

container.find('#userID').attr('value', 'demo');

console.log('container[0].outerHTML  is now');
console.log(container[0].outerHTML );

val（'demo'）设置输入元素的DOM值属性，因此“outerHTML”中没有任何内容

查看FIREBUG控制台中的列表：

x = $('<input value="x"/>')
[<input value=​"x">​]
y = x[0]
<input value=​"x">​
y.outerHTML
"<input value="x">"
y.value
"x"
x.val("y")
[<input value=​"x">​]
y.outerHTML
"<input value="x">"
y.value
"y"
x.attr("value","z")
[<input value=​"z">​]
y.outerHTML
"<input value="z">"
y.value
"z"

x=$（“”）
[​]
y=x[0]
​
y、 外层TML
""
y、 价值观
“x”
x、 瓦尔（“y”）
[​]
y、 外层TML
""
y、 价值观
“y”
x、 属性（“值”、“z”）
[​]
y、 外层TML
""
y、 价值观
“z”

所以，这是JS/DOM行为，为了匹配outerHTML和值，必须设置元素的属性值，而不是表单控件对象的属性值

在我看来，outerHTML是完成任务最糟糕的方式。将逻辑建立在波动和浏览器定义的事物（如元素的特定视图）的基础上是一个巨大的错误

---

将逻辑更改为显式检查受您直接控制的必填字段和/或属性。

我不确定是否理解您的问题。我看到JSFIDLE并在js“demo”输入后（我使用Firefox）。要刷新什么？我希望容器对象现在包含输入的新值…我已为我编辑了questionWorks！，这正是我需要的

var container  = $('#loginField');

console.log('container[0].outerHTML  is ');
console.log(container[0].outerHTML );

container.find('#userID').attr('value', 'demo');

console.log('container[0].outerHTML  is now');
console.log(container[0].outerHTML );

x = $('<input value="x"/>')
[<input value=​"x">​]
y = x[0]
<input value=​"x">​
y.outerHTML
"<input value="x">"
y.value
"x"
x.val("y")
[<input value=​"x">​]
y.outerHTML
"<input value="x">"
y.value
"y"
x.attr("value","z")
[<input value=​"z">​]
y.outerHTML
"<input value="z">"
y.value
"z"