JS如何从指定class元素中仅筛选li标签内容复制到另一class元素？

架构老林

2026-10-7

解决方案

核心实现逻辑

选中CardData下所有<li>元素，不需要手动指定索引，可自适应任意数量的列表项
将筛选出的<li>元素统一放入新的<ul>容器中，保留列表默认的项目符号样式
仅将筛选后的列表内容写入optionData，自动过滤<a>、<button>等不需要的元素

修改后的JS代码

function details(saad) {
  // 获取当前卡片对应的CardData元素
  const cardData = saad.parentElement.querySelector('.CardData');
  // 选中CardData下所有li元素
  const allLi = cardData.querySelectorAll('li');
  // 创建临时ul容器，保证li的列表样式正常显示
  const tempUl = document.createElement('ul');
  // 遍历所有li，克隆后添加到临时ul中
  allLi.forEach(liItem => {
    tempUl.appendChild(liItem.cloneNode(true));
  });
  // 将处理好的列表内容写入optionData
  document.querySelector('.optionData').innerHTML = tempUl.innerHTML;
}
// 注意：原有代码同时在HTML里写了onclick绑定，又做了全局遍历绑定，会导致函数重复执行，建议保留其中一种即可
// 如果要保留这行全局绑定，就删掉HTML中button标签里的 onclick="details(this)" 属性
document.querySelectorAll(".CardBtn").forEach(btn => {
  btn.addEventListener('click', function() {
    details(this);
  });
});