用悬停的元素内容替换另一个元素内容答案

【问题标题】：Replace another element content with hovered element content用悬停的元素内容替换另一个元素内容
【发布时间】：2017-12-22 14:29:20
【问题描述】：

我正在制作元素周期表，并且希望较小元素的内容在悬停时出现在较大元素中。以图片为例：

有没有一种相当简单的方法可以用纯 javascript 做到这一点？

我的较小元素的代码结构类似于以下内容：

<li class="element">
  <ul class="elec-state">
    <li>2</li>
  </ul>
  <span class="number">2</span>
  <h2 class="abv">He</h2>
  <h4 class="name">Helium</h4>
  <span class="weight">4.003</span>
</li>

【问题讨论】：

标签： javascript html hover clone

【解决方案1】：

// Find all elements
document.querySelectorAll('.element').forEach(node => {
  // Add event listener for each element
  node.addEventListener('mousemove', function(e) {

    // Plain copy the html of the element
    let html = this.innerHTML

    // Fill canvas with elements html
    document.querySelector('#canvas').innerHTML = html
  })
})

<button id="canvas"></button>
<br>
<button class="element"><span class="abv">One</span></button>
<button class="element"><span class="abv">Two</span></button>
<button class="element"><span class="abv">Three</span></button>

【讨论】：

我很抱歉没有更清楚。我需要将多条内容发送到“#canvas”。我已经更新了我的原始图像，以匹配。
@user3450906 我已经更新了我的答案。请注意，如果您打算在 canvas 和每个 element 中具有相同的 html 结构，则此解决方案非常简单。如果它们具有不同的结构，它会变得更加复杂，因为您必须将每个元素属性映射到画布属性。
太棒了，这很好用。是的，它们具有完全相同的结构。
顺便说一下，我注意到这个方法不适用于 IE。我认为这是因为 IE 不支持带有节点列表的 forEach，这是 querySelectorAll 返回的。