Как клонировать образ в чистом виде - PullRequest
Новая
       37

Как клонировать образ в чистом виде

0 голосов
/ 27 июня 2018

Я написал JS для клонирования изображения и прикрепил это действие к кнопке.
Это работает, но я не уверен, что это лучший способ сделать это.

Мои вопросы:

  • Правильно ли использовать querySelector для возврата элементов или лучше добавить дополнительные классы или идентификатор для кнопок и изображений?
  • использовать 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>

1 Ответ

0 голосов
/ 27 июня 2018

Другой вариант - обновить 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>
...