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

Question

我正在制作一个元素周期表，并希望较小元素的内容在悬停时出现在更大的元素中。这是一个图像作为例子：

使用普通的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>

Answer 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>