无需jQuery实现：当指定Div可见时插入新Div的方案咨询

核心逻辑对应 #

你原先的jQuery代码实现了当指定元素可见时，在另一元素后插入带between类的新div，下面是完全基于原生JavaScript的等价实现，无需加载jQuery：

实现代码 #

// 辅助函数：判断元素是否可见（等价于jQuery的:visible选择器逻辑）
function isVisible(element) {
  if (!element) return false;
  // 检查元素是否存在于DOM中、非display:none，且实际占据页面空间
  return element.offsetParent !== null && element.offsetWidth > 0 && element.offsetHeight > 0;
}

// 获取需要操作的元素
const div3 = document.getElementById('Div3');
const div5 = document.getElementById('Div5');
const div6 = document.getElementById('Div6');

// 对应原代码第一个判断：Div5可见时，在Div3后插入新元素
if (isVisible(div5)) {
  div3.insertAdjacentHTML('afterend', '<div class="between">tekst</div>');
}

// 对应原代码第二个判断：Div6可见时，在Div5后插入新元素
if (isVisible(div6)) {
  div5.insertAdjacentHTML('afterend', '<div class="between">tekst</div>');
}

关键API说明 #

• document.getElementById('id')：替代jQuery的$("#id")，精准获取单个DOM元素
• isVisible函数：模拟jQuery:visible的判断逻辑，确保元素不是display:none、visibility:hidden或被父元素完全隐藏，且实际有宽高（占据页面空间）
• insertAdjacentHTML('afterend', htmlString)：替代jQuery的.after()方法，直接在目标元素的紧邻后方插入HTML内容，语法简洁高效

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