使用原生JavaScript在页面底部放置CTA按钮并解决insertBefore报错

报错原因 #

你遇到的报错是两个问题共同导致的：

1. insertBefore方法参数顺序错误
   原生insertBefore的调用规则是 父节点.insertBefore(要插入的新节点, 参照节点)，你的代码把两个参数写反了，把参照节点放在了第一个参数位。
2. 拼写错误+参照节点归属错误
   你代码里写的BookingForrm多了一个字母r，属于拼写错误。同时如果这个参照节点不是document.body的直接子元素，用document.body调用insertBefore也会抛出该错误。

完整可运行实现 #

基础实现（插在目标节点前） #

// 先获取你要将按钮插在其前方的参照节点，替换为你实际的节点选择方式，比如querySelector('.xxx')
const referenceNode = document.querySelector('#BookingForm');
// 校验参照节点是否存在
if (!referenceNode) throw new Error('未找到目标参照节点，请检查选择器拼写');
// 获取参照节点的父节点，不用硬写document.body，适配所有层级的节点
const parentNode = referenceNode.parentNode;

// 创建按钮
const ctaBtn = document.createElement('button');
ctaBtn.innerText = 'BUTTON';
// 绑定点击显示菜单的事件，确认BookingFormContent是你要控制的下拉菜单节点
ctaBtn.addEventListener('click', () => {
  BookingFormContent.style.visibility = 'visible';
  // 若你之前用hidden属性隐藏，替换为：BookingFormContent.hidden = false
});

// 插入按钮
parentNode.insertBefore(ctaBtn, referenceNode);

可选优化（切换显示+点击空白关闭） #

如果需要点击按钮切换显示、点击页面其他位置关闭菜单，可以用以下逻辑：

ctaBtn.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡到document
  const isVisible = BookingFormContent.style.visibility === 'visible';
  BookingFormContent.style.visibility = isVisible ? 'hidden' : 'visible';
});

// 点击空白处关闭菜单
document.addEventListener('click', () => {
  BookingFormContent.style.visibility = 'hidden';
});

// 点击菜单内部不关闭
BookingFormContent.addEventListener('click', (e) => {
  e.stopPropagation();
});

其他注意事项 #

• 用visibility: hidden隐藏元素时，元素仍会占用页面布局空间，如果你希望隐藏时完全不占位，可以改用display: none控制，或者直接操作元素的hidden属性。
• 按钮可以自定义添加class，方便你调整样式，比如ctaBtn.classList.add('custom-cta-btn')。

内容的提问来源于stack exchange，提问作者Zèff Trinnigan