jQuery动态内容追加至textarea问题求助

尝试将网页中的多个动态元素内容追加到textarea中，但始终只显示最后一个元素的内容。已经知道textarea不能用append()，改用val()后还是只能看到最后一项，希望能把所有行的内容都显示在textarea里。

原代码片段：

JS代码 #

function getDetails() {
  // Clear content
  $("#save-content").val('');

  // First headline
  $("#save-content").val("First group: \n");

  // Content from first group
  $(".first-item .row").each(function(){
    var firstGroupName = $(this).find(".name").text();
    var firstGroupSurname = $(this).find(".surname").text();

    $("#save-content").val(firstGroupName + " " + firstGroupSurname  + "\n");
  });

  // Second headline
  $("#save-content").val("Second group: \n");

  // Content from second group
  $(".second-item .row").each(function(){
    var secondGroupName = $(this).find(".name").text();
    var secondGroupSurname = $(this).find(".surname").text();

    $("#save-content").val(secondGroupName + " " + secondGroupSurname  + "\n");
  });

  // Third headline
  $("#save-content").val("Third group: \n");

  // Content from third group
  $(".third-item .row").each(function(){
    var thirdGroupName = $(this).find(".name").text();
    var thirdGroupSurname = $(this).find(".surname").text();

    $("#save-content").val(thirdGroupName + " " + thirdGroupSurname  + "\n");
  });
}

$('button').on('click', function() {
  getDetails();
});

CSS代码 #

.row>div {
  display: inline-block;
}

button {
  display: block;
  margin: 10px 0;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imported-content">

  <div class="first-item">
    <div class="row">
      <div class="name">Penelope</div>
      <div class="surname">Smith</div>
    </div>
    <div class="row">
      <div class="name">Jane</div>
      <div class="surname">Dalton</div>
    </div>
  </div>

  <div class="second-item">
    <div class="row">
      <div class="name">Kate</div>
      <div class="surname">Davidson</div>
    </div>
  </div>

  <div class="third-item">
    <div class="row">
      <div class="name">David</div>
      <div class="surname">Peters</div>
    </div>
    <div class="row">
      <div class="name">Brad</div>
      <div class="surname">Lucas</div>
    </div>
  </div>

</div>

<button>Import</button>

<textarea id="save-content" rows="5"></textarea>

问题根源是每次调用val()时直接覆盖了textarea的原有内容，而非拼接新内容。以下两种方法可解决：

方法1：逐次拼接已有内容 #

每次设置新内容前，先获取textarea当前的内容，再将新内容拼接到末尾：

function getDetails() {
  // 清空内容
  $("#save-content").val('');

  // 第一组标题
  $("#save-content").val($("#save-content").val() + "First group: \n");

  // 第一组内容
  $(".first-item .row").each(function(){
    var firstGroupName = $(this).find(".name").text();
    var firstGroupSurname = $(this).find(".surname").text();
    $("#save-content").val($("#save-content").val() + firstGroupName + " " + firstGroupSurname  + "\n");
  });

  // 第二组标题
  $("#save-content").val($("#save-content").val() + "Second group: \n");

  // 第二组内容
  $(".second-item .row").each(function(){
    var secondGroupName = $(this).find(".name").text();
    var secondGroupSurname = $(this).find(".surname").text();
    $("#save-content").val($("#save-content").val() + secondGroupName + " " + secondGroupSurname  + "\n");
  });

  // 第三组标题
  $("#save-content").val($("#save-content").val() + "Third group: \n");

  // 第三组内容
  $(".third-item .row").each(function(){
    var thirdGroupName = $(this).find(".name").text();
    var thirdGroupSurname = $(this).find(".surname").text();
    $("#save-content").val($("#save-content").val() + thirdGroupName + " " + thirdGroupSurname  + "\n");
  });
}

$('button').on('click', function() {
  getDetails();
});

方法2：先拼接完整字符串再赋值（推荐） #

频繁操作DOM会降低性能，建议先把所有内容拼接成一个字符串，最后一次性赋值给textarea：

function getDetails() {
  let content = '';

  // 第一组标题+内容
  content += "First group: \n";
  $(".first-item .row").each(function(){
    const name = $(this).find(".name").text();
    const surname = $(this).find(".surname").text();
    content += `${name} ${surname}\n`;
  });

  // 第二组标题+内容
  content += "Second group: \n";
  $(".second-item .row").each(function(){
    const name = $(this).find(".name").text();
    const surname = $(this).find(".surname").text();
    content += `${name} ${surname}\n`;
  });

  // 第三组标题+内容
  content += "Third group: \n";
  $(".third-item .row").each(function(){
    const name = $(this).find(".name").text();
    const surname = $(this).find(".surname").text();
    content += `${name} ${surname}\n`;
  });

  // 一次性设置完整内容
  $("#save-content").val(content);
}

$('button').on('click', function() {
  getDetails();
});

关键说明 #

val("新内容")会完全替换textarea的现有内容，只有通过val(现有内容 + 新内容)的方式，才能实现内容的追加效果。第二种方法通过先在内存中拼接字符串，减少DOM操作次数，性能更优。

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