如何在纯js中克隆图像答案

【问题标题】：How clone image in pure js如何在纯js中克隆图像
【发布时间】：2018-12-06 10:00:15
【问题描述】：

我编写了 JS 来克隆图像并将这个动作附加到按钮上。
它有效，但我不确定这是更好的方法。

我的问题：

使用querySelector返回元素是否正确，还是为按钮和图片添加额外的类或id更好？
在这种情况下使用 cloneNode 是最佳还是使用其他方式更好？

(function() {
  'use strict';
  document.querySelector('button[action="button"]').addEventListener('click', function() {
    let image = document.querySelector('img[alt="Dog"]');
    let cln = image.cloneNode(true);
    document.getElementById('image-section').appendChild(cln);
  });
})();

<body>
  <div id="overview">
     <section class="section--center">
       <button action="button">Yeah, I want more dogs!</button>
     </section>
     <section class="section--center" id='image-section'>
        <img src="https://www.purina.com/sites/g/files/auxxlc196/files/styles/kraken_generic_max_width_480/public/HOUND_Beagle-%2813inch%29.jpg?itok=lN915WHC" alt="Dog" style="width: 150px">
     </section>
  </div>
</body>

【问题讨论】：

查询选择器并不排斥使用类和 id，我会明确建议添加类和 id。通过操作进行查询，尤其是像“按钮”这样的通用查询似乎很陌生。
按 id 查询将比查询选择器快得多 - 按属性查询是最慢的查询之一。如果您只想优化它，您可能想在codereview.stackexchange.com 中发布它

标签： javascript html image copy clone

【解决方案1】：

另一个选择是更新innerHTML，但也不是更好。方法应该解决一个任务，所以它取决于任务。

(function() {
  'use strict';
  document.querySelector('button[action="button"]').addEventListener('click', function() {
    document.getElementById('image-section').innerHTML +=
    document.querySelector('img[alt="Dog"]').outerHTML;
  });
})();

<body>
  <div id="overview">
     <section class="section--center">
       <button action="button">Yeah, I want more dogs!</button>
     </section>
     <section class="section--center" id='image-section'>
        <img src="https://www.purina.com/sites/g/files/auxxlc196/files/styles/kraken_generic_max_width_480/public/HOUND_Beagle-%2813inch%29.jpg?itok=lN915WHC" alt="Dog" style="width: 150px">
     </section>
  </div>
</body>

【讨论】：