点击按钮时innerHTML未更新，如何实现textarea内容追加？

你遇到的核心问题就是textarea内部不能放置HTML元素：
textarea的内容本质是纯文本，你写的<div id='container'>这类标签只会被当作普通字符串显示，而非真正的DOM节点。这就导致document.getElementById("container")根本找不到目标元素，自然无法执行追加操作。W3Schools编辑器可能做了特殊模拟处理，才让你误以为代码能运行，但实际浏览器环境里不会解析textarea内的HTML标签为DOM元素。

正确实现方式（纯文本/HTML文本追加） #

如果需求是在textarea的纯文本内容后追加内容，直接操作textarea的value属性即可：

HTML结构 #

<textarea name='short_description' id='short_desc' form='edit_item'>
  Foo bar
</textarea>
<button onclick="addNewMessage()">追加内容</button>

JS函数（追加纯文本） #

function addNewMessage() {
  const textarea = document.getElementById("short_desc");
  // 用\n实现textarea内的换行，再追加新内容
  textarea.value += "\nHere is the new message!";
}

JS函数（追加HTML格式文本，适合后续需解析HTML的场景） #

function addNewMessage() {
  const textarea = document.getElementById("short_desc");
  // 追加转义后的HTML标签，保留格式
  textarea.value += "\n<p><em>Here is the new message!</em></p>";
}

富文本场景替代方案 #

如果需要可视化的富文本编辑（而非纯文本textarea），可以用contenteditable属性的div替代textarea，这样就能正常操作DOM元素：

HTML结构 #

<div id="rich_editor" contenteditable="true">
  <div id="container">Foo bar</div>
</div>
<button onclick="addNewMessage()">追加内容</button>

JS函数 #

function addNewMessage() {
  const container = document.getElementById("container");
  // 创建新的DOM元素并追加
  const newPara = document.createElement("p");
  const emText = document.createElement("em");
  emText.textContent = "Here is the new message!";
  newPara.appendChild(emText);
  container.appendChild(newPara);
}

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