如何用JavaScript为指定HR与下一个HR间的元素添加父元素或样式类

方案一：用父div包裹目标元素 #

这种方式适合需要统一控制一组元素布局的场景，代码逻辑清晰，便于后续批量调整：

// 获取起始HR元素
const firstHr = document.getElementById('first-hr');
const elementsToWrap = [];
let currentEl = firstHr.nextElementSibling;

// 遍历收集两个HR之间的所有元素
while (currentEl && currentEl.tagName !== 'HR') {
  elementsToWrap.push(currentEl);
  currentEl = currentEl.nextElementSibling;
}

// 如果有元素需要包裹，创建父div并插入
if (elementsToWrap.length) {
  const wrapper = document.createElement('div');
  wrapper.classList.add('hr-between-content'); // 给父div加类，方便写样式
  
  elementsToWrap.forEach(el => wrapper.appendChild(el));
  firstHr.after(wrapper);
}

对应的CSS样式示例：

.hr-between-content {
  padding: 1.2rem;
  border-radius: 8px;
  background-color: #f8f9fa;
}

方案二：直接给目标元素添加样式类 #

如果不需要额外的父容器，直接给元素加类更简便，代码量更少：

const firstHr = document.getElementById('first-hr');
let currentEl = firstHr.nextElementSibling;

// 遍历给每个元素添加样式类
while (currentEl && currentEl.tagName !== 'HR') {
  currentEl.classList.add('hr-between-item');
  currentEl = currentEl.nextElementSibling;
}

对应的CSS样式示例：

.hr-between-item {
  color: #2d3748;
  margin: 0.8rem 0;
  line-height: 1.6;
}

两种方案都能实现你的需求，可根据实际样式需求选择：如果需要统一控制内边距、背景等容器级样式，选方案一；如果只是调整元素自身的字体、间距等，方案二更高效。

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