使用原生JavaScript无法检测div子元素？为空div添加子元素的问题

你的代码不生效主要有两个问题：

• ID不匹配：HTML里目标div的id是hasChild，但JS里用document.getElementById("isActive")获取元素，根本找不到目标节点，自然无法执行后续逻辑。
• 空元素判断不准确：即使div看起来是空的，里面的换行、空格会被浏览器解析为文本节点，hasChildNodes()会返回true，导致跳过创建逻辑。

修改后的代码： #

HTML部分（无需改动，确认id正确即可）

<section class="nav-page" id="metaTagsGenerator">
    <h2>Meta Tags Generator</h2>
    <div class="mtg-content" id="hasChild">
    </div>
</section>

JavaScript部分

document.addEventListener("DOMContentLoaded", function () {
    // 修正ID，匹配HTML里的目标div
    let tabsContent = document.getElementById("hasChild");

    // 改用children.length判断是否有实际元素子节点，忽略文本节点
    if (tabsContent.children.length === 0) {
        const placeHolderDiv = document.createElement("div");
        placeHolderDiv.setAttribute("class", "place-holder-div");
        tabsContent.appendChild(placeHolderDiv);
        placeHolderDiv.innerHTML = "Under construction...";
    }
});

补充说明： #

如果一定要用hasChildNodes()，可以通过判断innerHTML去除空白后是否为空来兼容：

if (!tabsContent.hasChildNodes() || tabsContent.innerHTML.trim() === "") {
    // 执行创建逻辑
}

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