如何从克隆的div元素中获取内部h2标签的内容

根据你提供的HTML结构和代码，要获取克隆后div里第二个子元素中h2的文本值，有两种可靠的实现方式：

方法一：通过类名直接定位（推荐） #

利用.heading_add类名直接定位到目标容器，再获取内部h2的文本，这种方式不依赖元素顺序，结构变更时更不容易出错：

newBtn.addEventListener('click', () =>{
  const exercises = document.querySelector('.exercises');
  let clone = videoCard.cloneNode(true);
  clone.defaultMuted = true;
  clone.classList.add('newVid');

  // 获取h2文本值
  const targetText = clone.querySelector('.heading_add h2').textContent.trim();
  console.log(targetText); // 输出 "Bent over row"

  exercises.appendChild(clone)
});

方法二：通过子元素索引定位 #

如果确定元素顺序不会改变，也可以通过子元素索引获取第二个子元素（索引为1，因为children从0开始计数），再提取h2文本：

newBtn.addEventListener('click', () =>{
  const exercises = document.querySelector('.exercises');
  let clone = videoCard.cloneNode(true);
  clone.defaultMuted = true;
  clone.classList.add('newVid');

  // 定位第二个子元素里的h2
  const headingContainer = clone.children[1];
  const targetText = headingContainer.querySelector('h2').textContent.trim();
  console.log(targetText);

  exercises.appendChild(clone)
});

注意事项 #

• 优先选择方法一，类名定位比依赖元素顺序更健壮。
• 使用textContent获取纯文本，比innerHTML更安全，不会解析HTML标签；若需要保留文本样式，可替换为innerText。
• 调用trim()可以去除文本前后的空格、换行符，确保结果整洁。

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