Question

我正在通过设置innerHTML来修改动态创建的输入元素，当我在DOM Inspector中查看元素时，我可以看到我传递的值在输入中。但是，我在页面上看不到它？是否有一个refresh（）函数，我应该在设置值后调用它？

我尝试过innerText，并且得到了相同的结果。

以下是我如何设置它：

$("input[name='group']")[0].innerHTML = groups;

（就JS集和JQuery选择器而言，我发现chrome插件是这样变幻无常的）

Answer 1

input个元素不包含HTML。他们有value s。

不，您不需要刷新任何内容，只要JavaScript完成运行（例如，事件处理程序完成），浏览器就会有更新显示的时刻，就会显示更改。如果你是在一个紧凑的循环中做这件事，你就不会在循环结束之前看到结果，但是我没有立即得到你正在做的感觉 - 除非你是单步通过开发工具中的代码？当你单步进行时，你不会看到刷新。

如果不是这样，那么当您调用代码时，该元素是否存在（尚未）？请记住，如果您的代码位于HTML 之前的<{1}}元素中您尝试更新的元素，那么您必须确保让它等待运行直到剩下的页面已被解析（例如，使用ready回调）。或者，只需执行what the YUI folks recommend并将script标记放在script的末尾。

这是一个有效的例子：

body

Live copy

故障：

等待DOM准备就绪（将我的代码放入我传递给jQuery(function($) { setInterval(function() { $("input[name='group']")[0].value = "Updated " + new Date(); }, 500); });的函数中;这是写jQuery(document).ready(...)）的简写方法。
设置间隔计时器以每500毫秒更新一次。
在间隔回调中，使用名称“group”查找input元素并更新其值。

更新：这是一系列更简单的示例，演示了整个“元素是否存在？”事情：

示例1：

jQuery

Live copy

示例2：

<form>
  <input type='text' name='group' value='original value' size='60'>
</form>
<script type='text/javascript'>
  // This works, because it's _after_ the element
  // it operates on
  $("input[name='group']")[0].value = "Just one update: " + new Date();
</script>

Live copy

示例3：

<script type='text/javascript'>
  // This FAILS, because it's _before_ the element
  // it operates on
  $("input[name='group']")[0].value = "Just one update: " + new Date();
</script>
<form>
  <input type='text' name='group' value='original value' size='60'>
</form>

Live copy

Answer 2

文本框没有内部HTML。您需要设置其值：

$("input[name='group']").val(groups);

动态添加元素的innerHTML未在Chrome中更新

2 个答案: