如何用JavaScript/JQuery选中ul.chosen-choices元素添加<li>？

先解决核心问题：元素是否已完成渲染 #

第三方插件（比如Chosen）通常会动态生成DOM元素，大概率是你执行选择代码时，目标元素还没渲染完成，试试这些方案：

1. 延迟等待元素加载 #

给DOM一点渲染时间，延迟时长可根据页面实际加载速度调整：

// JQuery 写法
setTimeout(() => {
  const targetUl = $('.store-filter-sec ul.chosen-choices');
  if (targetUl.length) {
    // 执行添加<li>的操作
    targetUl.append('<li class="search-choice">线上商店</li>');
  }
}, 500);

// 原生JavaScript 写法
setTimeout(() => {
  const targetUl = document.querySelector('.store-filter-sec ul.chosen-choices');
  if (targetUl) {
    const li = document.createElement('li');
    li.className = 'search-choice';
    li.textContent = '线上商店';
    targetUl.appendChild(li);
  }
}, 500);

2. 用MutationObserver监听DOM变化 #

比延迟等待更精准，能在元素生成瞬间捕获：

// 原生JavaScript 写法
const container = document.querySelector('.store-filter-sec');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    const targetUl = container.querySelector('ul.chosen-choices');
    if (targetUl) {
      // 添加目标<li>元素
      const li = document.createElement('li');
      li.className = 'search-choice';
      li.textContent = '线上商店';
      targetUl.appendChild(li);
      observer.disconnect(); // 找到元素后停止监听，避免重复执行
    }
  });
});

// 监听容器的子元素及后代变化
observer.observe(container, {
  childList: true,
  subtree: true
});

优化选择器精准度 #

如果上述方法无效，试试明确层级的选择器写法：

// JQuery 写法，精准定位层级
const targetUl = $('.store-filter-sec .chosen-container.chosen-container-multi ul.chosen-choices');

// 原生JavaScript 写法
const targetUl = document.querySelector('.store-filter-sec > .chosen-container.chosen-container-multi ul.chosen-choices');

特殊情况处理：元素在iframe内 #

若筛选框嵌入在iframe中，需先获取iframe的文档对象再选择元素：

const iframe = document.querySelector('iframe');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const targetUl = iframeDoc.querySelector('.store-filter-sec ul.chosen-choices');

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