如何将.quiz_results元素克隆并添加至iframe以实现打印功能？

你的问题出在document.querySelector('.quiz_results').appendChild(clone)这行代码上——appendChild()方法的返回值是被添加的DOM元素对象，当你把它和字符串拼接时，会被自动转成[object HTMLDivElement]，导致最终HTML内容异常。

下面是两种可行的修改方案：

方案一：直接使用克隆元素的HTML内容拼接 #

不需要把克隆元素添加到原DOM里，直接获取它的innerHTML来构建打印用的HTML：

const printButton = document.getElementById('print-quiz');
printButton.addEventListener('click', event => {
  // 克隆目标元素
  const clone = document.querySelector('.quiz_results').cloneNode(true);
  // 用克隆元素的innerHTML构建表格内容
  const user = `<table><tr><td>${clone.innerHTML}</td></tr></table>`;
  const printHtml = `<html><head><meta charset="utf-8"><title>Printed Quiz</title></head><body>${user}</body></html>`; 
  // 获取iframe并设置内容
  const iFrame = document.getElementById('print-quiz');
  iFrame.contentDocument.body.innerHTML = printHtml;
  iFrame.focus();
  iFrame.contentWindow.print();
});

方案二：直接将克隆元素添加到iframe中（更简洁） #

跳过HTML字符串拼接，直接把克隆元素追加到iframe的body里，这样能保留原元素的所有结构和样式关联：

const printButton = document.getElementById('print-quiz');
printButton.addEventListener('click', event => {
  // 克隆目标元素
  const clone = document.querySelector('.quiz_results').cloneNode(true);
  // 获取iframe的document对象
  const iFrameDoc = document.getElementById('print-quiz').contentDocument;
  // 清空iframe body并添加克隆元素
  iFrameDoc.body.innerHTML = '';
  iFrameDoc.body.appendChild(clone);
  // 执行打印
  iFrameDoc.defaultView.focus();
  iFrameDoc.defaultView.print();
});

两种方案都能解决你的问题，方案二更直接，还能避免手动拼接HTML可能带来的格式问题。

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