Как клонировать содержимое div в другой div с помощью JavaScript?

Question

Я хочу клонировать изображения div leftSide в div rightSide. При каждом щелчке по телу изображения в левом блоке должны быть клонированы в блок справа. Но я не могу получить результат с кодом, который я делаю. Есть ли ошибка в моем коде? Я хочу использовать JavaScript.

Вот мой код:

        var theLeftSide = document.getElementById("leftSide");  
        var width = 500; var height = 500;
        top_position = 0; var left_position = 0,
        var numberOfFaces = 5;
        var theRightSide = document.getElementById("rightSide");
        var leftSideImages = theLeftSide.cloneNode(true);
        document.getElementById("rightSide").appendChild(leftSideImages);


            for (var i = 0; i < 5; i++) {
            createElement(i);   
            numberOfFaces += 5;

        function createElement() {
            var image = document.createElement('img');
            image.src = "smile.png";
            image.style.position = 'absolute';
            image.style.top = top_position + "px";
            image.style.left = left_position + "px";
            theLeftSide.appendChild(image);
            top_position = Math.random() *   500 ;
            left_position = Math.random() *  500 ;

javascript

1

Joy 18 Дек 2015 в 22:38

Answer 1

Вот простой пример, который клонирует HTMLElement в ванильном JavaScript:

дополнительную информацию можно найти в MDN.

function CloneCtrl() {
  'use strict';
  var self = this;
  
  self.source = document.querySelector('.source');
  self.target = document.querySelector('.target');
  
  self.cloneSource = function(event) {
    var clone = self.source.cloneNode(true);
    
    self.target.appendChild(clone);
  }
  
  document
    .getElementById('cloneBtn')
    .addEventListener('click', self.cloneSource)
  ;
}

document.addEventListener('DOMContentLoaded', CloneCtrl);

.source {
  background: lightseagreen;
  width: 100px;
  height: 100px;
  line-height: 100px;
  overflow: hidden;
  margin: 5px;
  display: inline-block;
  text-align: center;
  color: #fff;
}

.target {
  border: 1px solid lightcoral;
  min-height: 110px;
}

<div><button id="cloneBtn">Clone Source</button></div>
<div class="source">SOURCE</div>
<hr>
<div class="target"></div>

1

Hitmands 18 Дек 2015 в 19:52

Answer 2

С помощью jQuery вы можете сделать это так:

$('#div2').html($('#div1').html());

Который найден в этом вопросе: Скопируйте содержимое div в еще один div.

На самом деле вы не предоставляете много подробностей, поэтому я могу опубликовать лучшее, надеюсь, это поможет !!

0

Community 23 Май 2017 в 10:28

Answer 3

Вы можете просто попробовать это, если у вас есть второй div на странице.

 document.getElementById("SecondDv").innerHTML = document.getElementById("FirstDv").innerHTML;

Это скопирует все, что есть в FirstDiv, во Second. ЛМК, если это работает.

0

Jean-François Fabre 17 Май 2019 в 19:23

Как клонировать содержимое div в другой div с помощью JavaScript?

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript