如何正确设置textarea属性，使其内容填充元素而非生成value属性？

核心原因 #

textarea的显示内容是存储在标签内部的文本节点，而非value属性（这和input类文本框逻辑不同）。用setAttribute('value', ...)只会给标签添加一个额外的HTML属性，不会同步到标签内部的内容里，因此保存innerHTML时看不到实际输入的文本。

正确解决方法 #

直接修改textarea的textContent（推荐，避免XSS风险）或innerHTML，将输入值写入标签内部：

// 假设this是触发事件的textarea元素
const ta = this;
// 将输入值写入textarea标签内部
ta.textContent = ta.value;

执行后，保存div的innerHTML时，textarea的代码会变成：

<textarea id="ta">some text</textarea>

而非带value属性的无效格式，后续加载时内容会正常显示在textarea中。

补充说明 #

• 如果需要保留换行等格式并转为HTML格式，可以改用innerHTML：

  ta.innerHTML = ta.value.replace(/\n/g, '<br>');
  

• 注意区分DOM属性和HTML属性：ta.value是DOM对象的属性，对应textarea的当前输入值，但修改它不会同步到innerHTML；只有修改标签内部的文本/HTML，才能让内容被innerHTML捕获。

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