JavaScript DOM操作插入计时p标签位置异常解决方案

你当前使用的innerHTML +=拼接逻辑，本质是读取.lap-time容器内的全部现有HTML转为字符串，拼接新的p标签内容后再整体重绘容器，所有新内容默认会被追加到容器的最末尾，因此所有计时标签只会依次堆在容器尾部，无法精准控制插入位置。
另外原代码存在变量拼写错误：表示秒的变量secend为错误拼写，标准拼写为second，拼写错误会导致时间值读取失败。

改用DOM原生节点操作API，可以精准控制计时标签的插入位置，不需要依赖字符串拼接：

• 插入到h2标题的紧邻后方
  如果需要计时标签跟在「Laps」标题后面，使用如下代码：

  // 获取目标标题节点
  const lapTitle = document.querySelector('.lap-time h2');
  // 生成计时节点
  const timeItem = document.createElement('p');
  const timeText = `${('0' + hour).slice(-2)}:${('0' + minute).slice(-2)}:${('0' + second).slice(-2)}`;
  timeItem.textContent = timeText;
  // 插入到标题紧邻的后方
  lapTitle.after(timeItem);
  

• 插入到h2标题的紧邻前方
  如果需要计时标签放在「Laps」标题的前面，只需要把插入方法替换为before即可：

  // 插入到标题紧邻的前方
  lapTitle.before(timeItem);
  

• 新计时始终置顶
  如果需要最新生成的计时永远展示在最顶部（紧贴标题下方），可以使用insertAdjacentElement方法实现：

  const lapContainer = document.querySelector('.lap-time');
  const timeItem = document.createElement('p');
  const timeText = `${('0' + hour).slice(-2)}:${('0' + minute).slice(-2)}:${('0' + second).slice(-2)}`;
  timeItem.textContent = timeText;
  // 在容器内部最开头插入新节点，也就是标题后的第一个位置
  lapContainer.insertAdjacentElement('afterbegin', timeItem);
  

提示：使用原生DOM节点操作相比innerHTML拼接的另一个好处是不会重复解析渲染容器内已有内容，性能更好，也不会破坏已有节点上绑定的事件。

内容的提问来源于stack exchange，提问作者Ibrahim All-Mamun