Shopify店铺新增堆叠第二公告栏JavaScript代码运行失败求助

现有代码错误点 #

• document.createElement() 仅支持传入纯HTML标签名作为参数，你填写的"span.l"属于非法的CSS选择器格式，会直接导致元素创建失败。
• 没有添加DOM加载完成的监听逻辑，如果脚本执行时原公告栏元素还未渲染，document.getElementById("announcement-bar")会返回空值，后续逻辑无法运行。
• 内联标签<span>嵌套块级标签<p>不符合HTML语义规范，容易出现样式异常。

修复后可用代码 #

JavaScript逻辑 #

<script>
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

document.addEventListener('DOMContentLoaded', function() {
  // 创建块级容器作为新公告栏载体
  const newAnnouncement = document.createElement("div");
  newAnnouncement.className = "announcementBar2";
  newAnnouncement.innerText = "FREE SHIPPING";
  
  const originalBar = document.getElementById("announcement-bar");
  // 兼容原公告栏不存在的场景，避免控制台报错
  if (originalBar) {
    insertAfter(originalBar, newAnnouncement);
  }
});
</script>

配套样式（可添加到主题的CSS文件中，匹配原有公告栏风格） #

.announcementBar2 {
  width: 100%;
  padding: 8px 0;
  text-align: center;
  /* 替换为你店铺原有公告栏的背景色、文字色、字号即可 */
  background: #000;
  color: #fff;
  font-size: 14px;
}

额外排查项 #

如果修复后仍不显示，可以打开浏览器控制台查看报错，确认你的店铺主题原公告栏的ID是否为announcement-bar，不同主题可能使用不同的ID或类名，替换对应选择器即可。

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