jQuery清空文本区域然后附加数据不起作用答案

【问题标题】：jQuery empty out text area then append data does not workjQuery清空文本区域然后附加数据不起作用
【发布时间】：2015-01-30 04:47:38
【问题描述】：

我有一个textarea，我应该清空所有数据，然后追加一个新数据。我尝试过这样的事情，但它总是以空数据告终。 textarea 只是一个标准的 html 输入：

<textarea name="mytextarea" id="mytextarea" rows="8" 
class="form-control" readonly="readonly">myOldData</textarea>

//This resulting in empty data
$('#mytextarea').val('');
$('#mytextarea').append("myData1");
$('#mytextarea').append("myData2");

但如果：

//This resulting in just myData1
$('#mytextarea').val('');
$('#mytextarea').val("myData1");
$('#mytextarea').append("myData2");

情况 3 是如果我不需要清空数据而只需追加就可以正常工作：

//This resulting in just myData1myData2
$('#mytextarea').val("myData1");
$('#mytextarea').append("myData2");

这里发生了什么？如何先清空数据，然后追加一些新数据？

【问题讨论】：

标签： javascript jquery input append textarea

【解决方案1】：

如何将数据附加到 textarea？ Append 方法应与 div、span、ul、ol 等容器标签一起使用。使用 .val() 在 textarea 中设置新数据。

如果您想附加一些东西而不是将其附加到您的#myData 文本区域的父级。它会达到你的目的。

【讨论】：

【解决方案2】：

如果您只是尝试设置值。我会构建你想要放入文本区域的字符串，然后一次性设置。

I.E.

var newString = 'myData1';
newString += 'myData2';

$('#mytextarea').val(newString);

.append() 用于将 DOM 元素附加到父 DOM 元素

【讨论】：

【解决方案3】：

我认为 append 是错误的选择...设置输入元素的值需要使用 .val()。

所以我建议你创建一个连接字符串，然后将其设置为 textarea 的值。

另一种选择是创建一个类似的插件

(function($) {
  $.fn.appendVal = function(value) {
    console.log(this, this.val)
    return this.val(function(i, val) {
      return val + value
    });
  }
})(jQuery);

jQuery(function($) {
  //This resulting in empty data
  $('#mytextarea').val('');
  $('#mytextarea').val("myData1");
  $('#mytextarea').val(function(i, val) {
    return val + "myData2"
  });
  $('#mytextarea').appendVal('myData3')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea name="mytextarea" id="mytextarea" rows="8" class="form-control" readonly="readonly">myOldData</textarea>

【讨论】：