求助：JQuery html()方法无法保留textarea首行换行如何解决

问题原因 #

你遇到的问题是因为浏览器解析HTML时，会自动忽略<textarea>标签紧跟的首行空白（包括换行符）。当你用$("body").html()插入包含开头换行的textarea字符串时，第一个\n被浏览器当作标签后的空白节点直接忽略了，所以原本两个换行只剩一个生效。

解决方案 #

方法1：用val()直接设置textarea的值（推荐）

不要把换行写在HTML字符串里，而是先创建textarea元素，再通过val()方法设置内容——这个方法会完整保留所有换行符，不受HTML解析规则影响：

$(document).ready(function(){
  // 创建textarea元素，再设置值
  const textarea = $('<textarea>').val('\n\nthird row');
  $('body').append(textarea);
});

方法2：处理已有的HTML字符串

如果你的内容是从服务器获取的完整HTML字符串（比如包含<textarea>\n\nthird row</textarea>），可以先解析DOM元素，再提取文本内容用val()重新赋值：

$(document).ready(function(){
  const serverHtml = '<textarea>\n\nthird row</textarea>';
  const $textarea = $(serverHtml);
  // 提取textarea内的原始文本（包含所有换行）
  const rawContent = $textarea.text();
  // 用val()重新设置，确保换行全部保留
  $textarea.val(rawContent);
  $('body').append($textarea);
});

补充说明 #

<pre>标签和white-space: pre-wrap对textarea无效，因为textarea的内容渲染规则是独立的——它的空白处理由表单元素的取值逻辑决定，而不是CSS的文本样式规则。用val()是最直接可靠的方式。

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