Chrome浏览器中JS动态添加的div不显示且元素面板找不到问题

DevOps 小满

2026-10-19

排查与解决方法

确认函数执行时机
如果JS代码放在<head>标签内且未绑定DOM加载监听，执行CreateDragClone时document.body还未完成解析，append操作会直接失效，元素不会被插入DOM树。
解决方法：将函数调用放在DOMContentLoaded事件回调内，或者把JS代码放在<body>标签末尾：
```
document.addEventListener('DOMContentLoaded', function() {
  CreateDragClone('传入你的partType参数')
})
```

补充元素宽高配置
你创建的绝对定位div未设置宽高也没有内部内容，默认渲染尺寸为0，就算插入成功也不会显示可视化效果，可在样式部分补充宽高属性：

function CreateDragClone(partType) {
  var cloneContainer = document.createElement("div");
  cloneContainer.setAttribute("id", "cloneDiv");
  //cloneContainer.setAttribute("class", "closeContainer");
  cloneContainer.style.visibility = "visible";
  cloneContainer.style.position = "absolute";
  cloneContainer.style.borderStyle = "solid";
  cloneContainer.style.borderColor = "red";
  cloneContainer.style.borderWidth = "1px";
  cloneContainer.style.top = "200px";
  cloneContainer.style.left = "200px";
  cloneContainer.style.zIndex = "100000";
  // 补充宽高配置
  cloneContainer.style.width = "100px";
  cloneContainer.style.height = "100px";
  document.body.append(cloneContainer);
}

排查元素是否被后续逻辑删除
如果插入操作执行后元素在面板中检索不到，说明有其他JS逻辑在插入完成后主动移除了该元素。可在document.body.append(cloneContainer)行添加断点，执行完成后在控制台输入document.getElementById('cloneDiv')验证，若此时存在后续消失，即可定位是其他清理逻辑导致的问题。
替换为兼容性更好的插入API
部分低版本浏览器对append方法的支持存在差异，可替换为兼容性更广泛的appendChild方法：
```
document.body.appendChild(cloneContainer);
```