Как продублировать изображение?

Question

[Сергей]

Есть 2 блока:

<div class="block1">
  <img src="img/flags/AU.svg" class="flag" alt="AU">
  <span>Australia</span>
</div>
<div class="block2"></div>

Как картинку из первого блока скопировать во второй? На JQuery я делаю это с помощью метода .clone(). Правильно ли это, существуют ли другие способы?

Comments

[Антон]

Работает? Если да, то зачем еще что-то?
Можете обратиться к селектору, взять .attr('src'), записать в переменную, вызвать другой селектор и так же через .attr('src', myvar) вставить в него

[Сергей]

Работает, просто интересно, есть ли другие варианты.

Answer 1

[Александр]

Правильно ли это

Правильно, если подходит под ваши задачи.

существуют ли другие способы?

Существуют и не один. Например можно копировать содержимое блока:

document.querySelector('div.block2').innerHTML = document.querySelector('div.block1').innerHTML;

Comments

[Сергей]

Я знаю об innerHTML, но мне не нужно содержимое целиком, надо только картинку.

[Александр]

А фантазию проявить? Вот так например:

document.querySelector('div.block2').innerHTML = document.querySelector('div.block1 img').outerHTML;

[Александр]

Сергей,
Или так:

var image = document.querySelector('div.block1 img');
var newImage = document.createElement(image.outerHTML);
document.querySelector('div.block2').appendChild(newImage);