如何让jQuery的html()方法返回带用户输入值的textarea？

问题核心：jQuery的html()方法读取的是DOM元素的innerHTML，而用户在<textarea>中输入的内容仅存储在元素的value属性里，innerHTML不会自动同步这个值，所以直接调用html()拿不到输入内容。

下面是几种可行的解决方法：

• 方法一：同步值到DOM内容后再获取HTML
  先将<textarea>的value赋值给它的文本内容，再调用父元素的html()方法：

  // 同步textarea的输入值到其DOM内容
  $('#test textarea').text($('#test textarea').val());
  // 获取包含输入值的HTML
  var test = $('#test').html();
  

  注：此操作不会影响页面上textarea的显示效果，因为浏览器渲染textarea时优先读取value属性。

• 方法二：直接构造带值的HTML字符串
  如果只需要目标textarea的HTML，可以直接通过输入值拼接字符串：

  var inputVal = $('#test textarea').val();
  var test = `<textarea>${inputVal}</textarea>`;
  

• 方法三：克隆元素后同步值（不修改原DOM）
  若不想改动原页面的DOM结构，可先克隆父元素，在克隆体上同步值后再获取HTML：

  var $clone = $('#test').clone();
  $clone.find('textarea').text($clone.find('textarea').val());
  var test = $clone.html();
  

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