如何用类似Array.join()的逻辑在jQuery元素间插入分隔元素？

核心思路 #

DOM元素是对象而非字符串，无法直接用Array.join()处理，只能通过遍历子元素，逐个插入分隔符节点。以下是两种常见场景的实现：

场景1：所有子元素间都插入 and 分隔符 #

适用于需要在每两个子元素间都添加该分隔符的情况：

// 替换成你的父元素选择器（比如通过标签名、属性等定位）
const parent = document.querySelector('.parent-container');
// 将子元素集合转为数组，方便后续操作
const childElements = Array.from(parent.children);

// 从第二个子元素开始，在其前方插入分隔符
childElements.slice(1).forEach(child => {
  const separator = document.createElement('span');
  separator.innerHTML = ' and ';
  parent.insertBefore(separator, child);
});

场景2：英文列表格式（前用逗号，最后一组用and） #

如果是类似A, B, and C的常见列表需求，可以调整分隔符逻辑：

const parent = document.querySelector('.parent-container');
const childElements = Array.from(parent.children);
const totalChildren = childElements.length;

childElements.forEach((child, index) => {
  // 最后一个子元素后不插入分隔符
  if (index === totalChildren - 1) return;
  
  const separator = document.createElement('span');
  // 倒数第二个子元素后用and，其余用逗号加空格
  separator.innerHTML = index === totalChildren - 2 ? ' and ' : ', ';
  parent.insertBefore(separator, childElements[index + 1]);
});

注意事项 #

• 用parent.children获取子元素只会返回元素节点（如span、a等），自动忽略文本节点、注释节点，符合你的需求；
• 如果父元素选择器需要更精准（比如通过父元素的属性定位），直接替换querySelector的参数即可，无需修改子元素；
• 两种实现都不需要给子元素添加类或ID，完全基于父元素操作。

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