如何用jQuery在每组新增数据后添加<br>标签？

看起来你需要在每次新的选择结果前插入两个换行，而不是直接拼接在旧内容后面。这里有个贴合你需求的修改方案，结合你的代码逻辑调整如下：

首先，我们需要区分首次添加和后续添加的场景，同时确保每次操作后重置选中状态，避免和上次的选择混淆。以下是完整的代码示例：

var valArray = [];

// 按钮选中/取消逻辑（假设你的按钮有.btn类）
$('.btn').click(function() {
  const btnVal = $(this).val();
  // 切换选中状态
  if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    // 从数组中移除对应值
    valArray = valArray.filter(item => item !== btnVal);
  } else {
    $(this).addClass('selected');
    valArray.push(btnVal);
  }
});

// 添加按钮点击逻辑（假设添加按钮有.add-btn类，结果显示在.result元素中）
$('.add-btn').click(function() {
  // 将本次选中的值拼接成字符串（这里用逗号分隔，你可以根据需求调整分隔符）
  const newContent = valArray.join(', ');
  const resultElement = $('.result');
  const existingContent = resultElement.html();

  if (existingContent) {
    // 如果已有内容，先加两个<br>再拼接新内容
    resultElement.html(existingContent + '<br><br>' + newContent);
  } else {
    // 首次添加直接显示内容
    resultElement.html(newContent);
  }

  // 重置选中状态，准备下一次操作
  valArray = [];
  $('.btn').removeClass('selected');
});

关键修改点说明： #

• 使用html()而非text()更新结果：text()会把<br>当成普通文本显示，而html()能正确解析HTML换行标签，实现真正的换行效果。
• 新增状态重置逻辑：每次点击添加后清空valArray并移除按钮的选中类，确保下次选择是全新的，不会和上次的选中项混在一起。
• 条件判断已有内容：只有当结果区域已有内容时，才在新内容前添加<br><br>，避免首次显示就出现多余的换行。

如果你的按钮选择逻辑和示例略有不同（比如点击直接选中无需取消），只需要调整按钮点击部分的代码，核心的添加逻辑保持不变即可。

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