使用jQuery：目标div无特定class子元素时追加div的问题

嘿，我懂你遇到的问题！想要实现仅当目标div下不存在特定class的子元素时，才追加新div，对吧？大概率是之前的判断条件或者选择器没写对，我给你梳理下靠谱的实现方式，顺便避坑~

先说说常见的坑 #

你之前的判断没生效，可能是这几个原因：

• 用了children()但目标元素是父div的后代（不是直接子元素），导致漏判；
• 选择器写错了（比如父元素class拼错，或者特定class名称不对）；
• 代码在DOM还没加载完成时就执行了，根本找不到目标父div。

原生JavaScript实现 #

如果不用框架，这样写最稳妥：

// 等DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标父div
  const parentDiv = document.querySelector('.your-parent-class');
  // 检查是否存在特定class的子元素（所有后代都能查到）
  const hasTargetChild = parentDiv.querySelector('.specific-child-class') !== null;
  
  // 不存在的话就追加新div
  if (!hasTargetChild) {
    const newDiv = document.createElement('div');
    newDiv.textContent = '这是追加的内容';
    newDiv.classList.add('new-div-style'); // 给新div加样式class
    parentDiv.appendChild(newDiv);
  }
});

如果只需要检查直接子元素，把querySelector换成parentDiv.querySelector(':scope > .specific-child-class')就行（:scope表示当前元素的作用域）。

jQuery实现 #

如果你用jQuery，代码会更简洁：

$(document).ready(function() {
  const $parent = $('.your-parent-class');
  // 用find()查找所有后代，要找直接子元素就用children()
  if ($parent.find('.specific-child-class').length === 0) {
    // 直接追加新div元素
    $parent.append('<div class="new-div-style">这是追加的内容</div>');
  }
});

验证小技巧 #

可以先在控制台跑一下选择器，比如document.querySelector('.your-parent-class .specific-child-class')或者$('.your-parent-class .specific-child-class')，看看能不能找到元素，这样就能快速排查是选择器问题还是逻辑问题啦~

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