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

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

我尝试了innerText和value，得到了相同的结果

以下是我的设置方式：

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

---

（就JS集合和JQuery选择器而言，我发现chrome插件是如此易变）

input

元素不包含HTML。它们具有

值

s

不，您不需要刷新任何内容，只要JavaScript完成运行（例如，事件处理程序完成），并且浏览器有时间更新显示，就会显示更改。如果你是在一个紧密的循环中做这件事的，你会在循环结束前看不到结果，但是我并没有立即意识到你在做什么——除非你在开发工具中单步执行代码？您将无法看到刷新，因为您是单步执行的

如果不是这样，那么在调用代码时，元素是否（还）不存在？请记住，如果您的代码在您尝试更新的元素之前位于HTML中的

脚本
元素中，则必须确保它等待运行，直到解析完页面的其余部分（例如，使用回调）。或者，只需执行并将
脚本
标记放在
正文的末尾

下面是一个工作示例：

jQuery(function($) {

  setInterval(function() {
    $("input[name='group']")[0].value = "Updated " + new Date();
  }, 500);

});​


细分：


等待DOM就绪（将代码放入传递到
jQuery
的函数中；这是一种简写方式）
设置一个间隔计时器，每500毫秒更新一次
在间隔回调中，查找名为“group”的输入元素并更新其值


更新：下面是一系列简单的示例，演示了整个“元素是否存在？”问题：

示例1:

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

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

<script type='text/javascript'>
  // This works, because although this script tag is before
  // the element, we're using `ready` to wait until the DOM
  // is ready
  $(function() {
    $("input[name='group']")[0].value = "Just one update: " + new Date();
  });
</script>
<form>
  <input type='text' name='group' value='original value' size='60'>
</form>


//这是可行的，因为它在元素之后
//它运行于
$（“输入[name='group']”[0]。value=“只需一次更新：“+new Date（）”；


示例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>

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

<script type='text/javascript'>
  // This works, because although this script tag is before
  // the element, we're using `ready` to wait until the DOM
  // is ready
  $(function() {
    $("input[name='group']")[0].value = "Just one update: " + new Date();
  });
</script>
<form>
  <input type='text' name='group' value='original value' size='60'>
</form>


//这失败了，因为它在元素之前
//它运行于
$（“输入[name='group']”[0]。value=“只需一次更新：“+new Date（）”；


示例3:

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

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

<script type='text/javascript'>
  // This works, because although this script tag is before
  // the element, we're using `ready` to wait until the DOM
  // is ready
  $(function() {
    $("input[name='group']")[0].value = "Just one update: " + new Date();
  });
</script>
<form>
  <input type='text' name='group' value='original value' size='60'>
</form>


//这是可行的，因为尽管此脚本标记在
//元素，我们使用'ready'来等待DOM
//准备好了
$（函数（）{
$（“输入[name='group']”[0]。value=“只需一次更新：“+new Date（）”；
});

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

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

谢谢你的帮助。所以，我正在开发一个插件。。。因此JS在元素之前。我不知道我能不能改变这一点，我总是会搞乱现有的页面dom，并在最后注入一个脚本。然而，我试着每隔一段时间进行一次测试，但没有成功。我不知道为什么会这样。@Sara：如果你在写一个插件，最好让页面作者显式地触发你的代码（例如，由他们决定如何和何时实现）。这将是标准方法。但是，如果希望它是自动的，请使用示例3中的
ready
事件。