javascript - 如何用新的html元素动态替换旧的html元素

Question

1. 总结问题，包括有关您的目标的详细信息

我这个项目的目标是在用户点击按钮时动态生成新的 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>

当用户单击按钮时，将调用以下 javascript 方法

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

      //fetch the results box
      word_matching = document.getElementById("results");
      
      //has the html already been generated? 
      if(!htmlGenerated){
        word_matching.innerHTML = ""
        console.log("generating textarea");
        //create textarea
        word_matching.innerHTML += '<textarea id="html" value="';

        //create key inputs
        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');
        }
  
        //create description inputs
        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 的全局变量。

描述预期和实际结果

我希望这种方法能够将 html 附加到具有 id 的 div 中results。它第一次工作

但是，当我尝试使用 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);
    }

我明白了

2. 描述您尝试过的内容 展示您尝试过的内容并告诉我们您发现了什么（在本网站或其他地方）以及为什么它不能满足您的需求。当您提供研究时，您可以获得更好的答案。

我已经想出了如何用新的 html 替换现有的 html。单击添加更多按钮后，生成的html 标志将设置为 false。然后，当用户单击生成 html 时，旧的 html 将被删除。新的 html 应该使用新的键和描述添加到 id= 的元素中results。问题是没有生成文本区域。

标签： javascripthtml