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

Question

我遇到了一种问题，我认为这与我生成 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>

然后，我有一个基于数组加载“s_effect”的函数（很好，工作正常，np）。

那么，我的ne()（新效果）函数：

function ne(){
  reset();
  e = g('s_effect');

  if(newEffect(e.options[e.selectedIndex].value)){
    console.log("new effect created");
    updateScreen();
  }
}

它基本上“重置”屏幕的某些部分（错误跟踪以及与我的问题无关的内容），然后调用updateScreen()（注意：g 函数只是 document.getElementById 的同义词）

转到这个函数（抱歉，代码很多...）

function updateScreen(){
  if(project.effect instanceof Effect){
    lock("instant");
    lock("event");
    showDescription();
    generateOptions();
  }else if(project.effect == null){
    unlock("instant");
    unlock("event");
  }

  if(project.check()){
    generateButton();
  }else{
    npButton();
  }
}

这基本上锁定了窗口的某些部分，然后在下面的调用中获取一些 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>

最后，addNode() 生成了 innerHTML += [new div on "extra"]，但增加了数量（2_color、2_color_rgb 等）。

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>' + 
}

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

当我修改通过按钮添加的任何 x_color 或 x_color 时出现问题...它添加了一个新的“节点”但重新启动了先前输入的值。

我对其进行了调试，并且正在添加，“extra”的innerHTML 显示所有具有“#FFFFFF”值（初始）的输入，但在屏幕上，这些值是正确的......

如有任何帮助，我们将不胜感激。

PS：我正在使用 chrome。

谢谢！

Answer 1

澄清一下，正如@Forty3 回答的那样，问题在于我每次都在修改innerHTML，使我的浏览器每次都重新渲染extra。

按照他的建议，我编辑了我的函数，现在看起来像

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

现在可以正常使用了。

感谢大家的支持。

Answer 2

问题似乎在于，通过重新评估 g('extra') DOM 元素的 .innerHTML 属性，您是在告诉浏览器根据 HTML 重新呈现元素——而不是包含的 DOM 元素和值内。

换句话说，当您添加颜色时，g('extra').innerHTML 会更新为新的 HTML，以呈现额外的颜色选择块（即2_color）。当用户随后选择一种新颜色时，浏览器将更新2_color DOM 元素的值，但不一定更新g('extra') 的innerHTML 属性。然后，当添加另一个颜色块时，innerHTML 会再次更新，浏览器会重新渲染它，从而“重置”这些值。

不要使用 HTML 字符串构建其他控件，而是使用 DOM 操作（例如 .createElement() 和 .append()）来添加新选项。