JavaScript中innerHTML赋值后textarea标签未正常渲染问题排查求助

你的问题核心在于分步拼接innerHTML时，浏览器会立即解析不完整的HTML标签，导致<textarea>被自动修正或丢弃。

为什么<textarea>会消失？ #

当你执行word_matching.innerHTML = '<textarea id="html" value=';时，这是一个不完整、语法错误的HTML字符串。浏览器的HTML解析器不会等待你后续补全标签，它会立刻尝试修正这个无效标记——要么自动闭合为<textarea id="html" value=""></textarea>（但后续追加的内容不会进入textarea内部，而是成为它的兄弟元素），要么直接忽略这个错误标签，导致你后续的console.log完全看不到它的痕迹。

另外还有几个隐藏的语法问题会加重这个问题：

1. 你最后一行的">原本是想闭合textarea标签，但分步赋值的方式让浏览器无法将这部分与前面的textarea关联起来；
2. 部分标签缺少必要的结构（比如<table>里直接写<td>，缺少<tr>）；
3. 标签属性之间没有空格（比如id="s'+i+'"class="draggyBox-small"），会导致属性解析失败。

修正后的代码方案 #

解决思路是：先把所有HTML内容拼接成一个完整的合法字符串，最后一次性赋值给innerHTML，避免浏览器中途解析不完整的标记。同时修正所有语法细节：

if(!htmlGenerated) { 
  console.log("generating textarea"); 
  // 先初始化空字符串，拼接所有完整HTML
  let fullHtml = '';

  // 创建完整的textarea标签（注意：textarea的内容是放在标签内部，而非value属性）
  fullHtml += '<textarea id="html"></textarea>'; 

  // 创建关键输入项（修正属性间的空格）
  for (let i = 0; i < elArray.length; i++) { 
    fullHtml += `<div id="s${i}" class="draggyBox-small">${elArray[i]}</div>\n`; 
  } 

  // 创建描述输入项（补上table缺失的<tr>标签）
  for (let i = 0; i < dlArray.length; i++) { 
    fullHtml += `
      <table id="tablestyle">
        <tr>
          <td>
            <div id="t${i}" class="ltarget"></div>
          </td>
          <td id="d2">${dlArray[i]}</td>
        </tr>
      </table>
    `; 
  } 

  // 拼接按钮区域（修正多余的闭合标签）
  fullHtml += `
    <div id="program1" style="border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0 auto; 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">
          <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;"/>
          </a>
        </span>
      </span>
    </div>
  `; 
  
  // 一次性赋值完整HTML，避免分步解析的问题
  word_matching.innerHTML = fullHtml;
  htmlGenerated = true; 

  console.log("________ word matching _________"); 
  console.log(word_matching.innerHTML); 
  console.log("________ word matching _________"); 
}

额外优化提示 #

• 分步修改innerHTML会触发浏览器多次重绘DOM，不仅效率低，还容易引发解析异常，尽量使用一次性赋值的方式；
• 可以使用模板字符串（`）替代字符串拼接，让代码可读性更高，也更容易避免语法错误；
• textarea的value属性在HTML中不需要显式写，它的内容是放在<textarea>和</textarea>之间的，DOM元素的value属性是JS层面的操作。

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