如何动态将旧HTML元素替换为新元素 单词匹配练习生成异常排查

本项目的目标是实现点击按钮时动态生成新的HTML输入项，点击generate_html按钮时会创建一组HTML元素，作为单词匹配练习的关键词和描述项。

初始输入项的结构如下：

<div class="row">
  Key Term 1: <input id="el1" type="text" value="">
</div>
<div class="row">
  Description 1: <input id="dl1" type="text" value="">
</div>

用户点击生成按钮时会调用如下process_input方法：

function process_input() {
  const e_inputs = document.querySelectorAll("[id^='el']");
  const d_inputs = document.querySelectorAll("[id^='dl']");
  const title = document.getElementById('title_input').value;
  let elArray = [];
  let dlArray = [];
  e_inputs.forEach( i => { if(i.value) elArray.push(i.value) });
  d_inputs.forEach( i => { if(i.value) dlArray.push(i.value) });
  generate_html(elArray, dlArray, title);
}

generate_html方法的实现如下：

const generate_html = (elArray, dlArray, title) => {
  let text = title + "\n";
  for (let i = 0; i < elArray.length; i++) {
      text += `${elArray[i]}:${dlArray[i]}\n`;
  }
  console.log(text);

  word_matching = document.getElementById("results");
  
  if(!htmlGenerated){
    word_matching.innerHTML = ""
    console.log("generating textarea");
    word_matching.innerHTML += '<textarea id="html" value="';

    for (let i = 0; i < elArray.length; i++){
      word_matching.innerHTML += '<div\s id="s'+i+'"class="draggyBox-small">'+elArray[i]+'</div>\n' 
      console.log('<div\s id="s'+i+'"class="draggyBox-small">'+elArray[i]+'</div>\n');
    }

    for (let i = 0; i < dlArray.length; i++){
      word_matching.innerHTML += '<table id="tablestyle"><td >\n \t\t<div\s id="t'+i+'"class="ltarget"></div>\n \t</td >\n \t<td \s id="d2">'+dlArray[i]+'</td >\n </tr>\n</table>'
      console.log('<table id="tablestyle"><td >\n \t\t<div\s id="t'+i+'"class="ltarget"></div>\n \t</td >\n \t<td \s id="d2">'+dlArray[i]+'</td >\n </tr>\n</table>');
    }

    word_matching.innerHTML += '<div id = "program1" style="border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0px auto; border: 1px; text-align: center; margin-top: 5px;"> <span style="padding: 3px"> <button id ="one" class="button" type="button" onClick="one()">Show Answer</button> <button id = "resetButton" class="button" type="button" onClick="reset()">Reset</button><button id = "renderHTMLButton" class="button" type="button" onClick="render_html()">Render html</button> <span id = "audio" style=""> <a href="" title="Turns Text-to-Speech Output On or Off" class="menulink" style="text-decoration: none;"><img id="bg" src="audioOff.png" height="30" width="30" style="margin-bottom:-10px; padding-bottom:-20px;"/> </a> </span> </span> </div> </div></div>"';
    htmlGenerated = true;
  }
}

参考说明：htmlGenerated是初始值为false的全局变量。

预期逻辑：generate_html方法会将生成的HTML内容追加到id为results的div中，首次运行功能符合预期。
异常场景：调用用于新增输入项的add_more函数后，再次生成HTML时出现异常，textarea无法正常生成。

add_more函数实现如下：

function add_more() {
  htmlGenerated = false;
  i++;
  inputs = document.getElementsByClassName("inputBoxes")[0];
  row = document.createElement("div");
  row.innerHTML = "Key Term "+i+" :";
  row.setAttribute("class","row");
  key = document.createElement("input");
  key.setAttribute("id","el"+i);
  row.appendChild(key);
  inputs.appendChild(row);
  row2 = document.createElement("div");
  row2.setAttribute("class","row");
  row2.innerHTML = "Description  "+i+" :";
  description = document.createElement("input");
  description.setAttribute("id","dl"+i);
  row2.appendChild(description);
  inputs.appendChild(row2);
}

已明确替换逻辑：点击新增按钮后会将htmlGenerated标记设为false，用户点击生成HTML按钮时会清空旧HTML内容，预期将包含新关键词和描述项的新HTML添加到id为results的元素中，目前问题为textarea无法正常生成。

内容的提问来源于stack exchange，提问作者Evan Gertis