Javascript 动态创建的HTML不会重新加载

我有一个问题，我认为这与我如何生成HTML有关。。。我使用JavaScript函数生成一些HTML，但随后它开始出现故障。。。让我先粘贴一些代码

首先，我的原始HTML

  <div id="effect">
    <label for="s_effect">Effect: </label>
    <select name="s_effect" id="s_effect" onchange="ne();"> 
      <option value="">Select your Effect</option>
    </select>
    <div id="effect_description"></div>
    <div id="effect_options"></div>
  </div>

它基本上会“重置”屏幕的某些部分（错误跟踪等，与我的问题无关），然后调用

updateScreen（）

（注意：g函数只是document.getElementById的同义词）

它转到这个函数（抱歉，代码太多了…）

这基本上就是锁定窗口的某些部分，然后在下面的调用中获取一些HTML

generateDescription（）

，零件出现故障，执行以下操作：

function generateOptions(){
  g('effect_options').innerHTML = '';
  effectID = project.effect.calculateId();

  if(effectID === false)
    return false;

  g('effect_options').innerHTML = project.effect.parameters.HTMLOptions;
  return true;
}

它调用基本上转储一些HTML代码的对象属性：

<div>
    <label for="1_color">Color: </label><input type="color" id="1_color" name="1_color" onchange="updateColor('1_color');" value="#FFFFFF">
    <input type="text" name="1_color_rgb" id="1_color_rgb" onchange="updateColor('1_color_rgb');" value="#FFFFFF">
</div>
<div id="extra"></div>
<div>
    <input type="button" value="Add Node" onclick="addNode();">
</div>

到目前为止，一切正常，甚至“updateColor”也正常工作（它更新每个输入的值，以便您可以通过填充任何输入来选择颜色）

当我修改任何x_颜色或通过按钮添加的x_颜色时，就会出现问题。。。它添加一个新的“节点”，但重新启动以前输入的值

我调试了它，在进行添加时，“extra”的

innerHTML

显示了所有带有“#FFFFFF”值（初始值）的输入，但在屏幕上，值是正确的

在此方面的任何帮助都将不胜感激

附言：我用的是铬

---

谢谢大家!

问题在于，通过重新定义

g（'extra'）

DOM元素的

.innerHTML

属性，您告诉浏览器基于HTML重新呈现元素，而不是其中包含的DOM元素和值

换句话说，当您添加颜色时，

g（'extra'）.innerHTML

将使用新的HTML进行更新，以呈现额外的颜色选择块（即

2_color

）。当用户选择新颜色时，浏览器将更新

2_color

DOM元素的值，但不一定更新

g（'extra'）

的

innerHTML

属性。然后，当添加另一个色块时，

innerHTML

再次更新，浏览器重新呈现它，从而“重置”值

---

与其使用HTML字符串构造附加控件，不如使用DOM操纵（例如

.createElement（）

和

.append（）

）来添加新选项。

正如@Forty3所回答的，只是澄清一下，问题是我每次都在修改

内部HTML

，使我的浏览器每次重新渲染

extra

正如他所建议的，我编辑了我的函数，现在看起来

function addNode(){
    var count = ++(project.effect.parameters.colorCount);
    var nDiv  = document.createElement("div");
    nDiv.innerHTML = "whatever I was putting...";
    g('extra').appendChild(nDiv);
}

现在它工作得很好

---

感谢大家的支持。

如果您能在代码中添加一个JSFIDLE，它将大大有助于我们了解当前的效果并更好地理解问题。FWIW-您没有包含

addNode（）

的代码，有趣的是，这正是您所说的问题发生的地方。那么您的元素是动态创建的？听起来您可能需要使用事件委派。@Forty3添加了代码。什么是JSFIDLE？（很抱歉，这里没有问JS的东西）-这是一种组装工作（或非工作）代码示例的方法，它给了其他人一个帮助的机会。@DavidSoléGonzález你能给我们完整的代码页吗好的，我明白你的意思。我将尽快尝试并分享我的结果。谢谢就这样。我添加了一个答案，解释了我根据您的评论所做的更改（只是为了澄清）。谢谢

<div>
    <label for="1_color">Color: </label><input type="color" id="1_color" name="1_color" onchange="updateColor('1_color');" value="#FFFFFF">
    <input type="text" name="1_color_rgb" id="1_color_rgb" onchange="updateColor('1_color_rgb');" value="#FFFFFF">
</div>
<div id="extra"></div>
<div>
    <input type="button" value="Add Node" onclick="addNode();">
</div>

function addNode(){
  var count = ++(project.effect.parameters.colorCount);
  g('extra').innerHTML +=
  '<div><label for="' + count + '_color">Color: </label><input type="color" id="' + count + '_color" name="' + count + '_color" onchange="updateColor(\'' + count + '_color\');" value="#FFFFFF" />' +
  '<input type="text" name="' + count + '_color_rgb" id="' + count + '_color_rgb" onchange="updateColor(\'' + count + '_color_rgb\');" value="#FFFFFF" /></div>' + 
}

function addNode(){
    var count = ++(project.effect.parameters.colorCount);
    var nDiv  = document.createElement("div");
    nDiv.innerHTML = "whatever I was putting...";
    g('extra').appendChild(nDiv);
}