如何基于日期调整timeline中div元素的位置

要实现「过去日期在红色当前日期上方，未来日期在下方」的效果，不用CSS order，直接通过DOM操作分组插入更可靠，修改后的代码如下：

完整代码 #

<div class="timeline">
  <div>04-10-2022</div>
  <div>05-02-2022</div>
  <div>06-12-2022</div>
  <div>07-26-2022</div>
  <div>01-15-2023</div>
  <div>02-01-2023</div>
</div>

const timeline = document.querySelector('.timeline')
const timelineItems = document.querySelectorAll('.timeline > div')
const today = new Date()
// 重置当天时间为00:00:00，避免因当前时间导致日期比较误判
today.setHours(0, 0, 0, 0)

const dateFormatter = new Intl.DateTimeFormat("en-uk", {
    dateStyle: "short"
})

const pastDates = []
const futureDates = []

timelineItems.forEach(item => {
  // 拆分原始日期字符串，按年/月/日正确创建Date对象（月份从0开始需减1）
  const [month, day, year] = item.textContent.split('-')
  const date = new Date(year, month - 1, day)
  // 格式化日期文本
  item.textContent = dateFormatter.format(date)

  // 区分过去和未来日期，存入对应数组
  if (date < today) {
    pastDates.push(item)
  } else {
    futureDates.push(item)
  }
})

// 创建红色当前日期容器
const todayContainer = document.createElement("div")
todayContainer.style.background = "red"
todayContainer.textContent = dateFormatter.format(today)

// 清空原时间线，按顺序重新插入元素
timeline.innerHTML = ''
pastDates.forEach(item => timeline.appendChild(item))
timeline.appendChild(todayContainer)
futureDates.forEach(item => timeline.appendChild(item))

关键改动说明 #

• 日期比较准确性：把today的时分秒重置为0，确保和其他仅含年月日的日期比较时不会出错（比如当前时间是下午，当天的日期不会被误判为未来）。
• 日期解析可靠性：手动拆分原始日期字符串，避免不同浏览器对MM-DD-YYYY格式的解析差异。
• 分组插入逻辑：把日期项分成「过去」「未来」两个数组，清空原容器后按「过去→当前→未来」的顺序插入，直接实现需求的布局。

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