javascript - 如何使用 JavaScript 将一个 div 的内容克隆到另一个 div 中？

Question

我想将 div leftSide 的图像克隆到 div rightSide 中。每次单击主体时，左侧 div 上的图像都应克隆到右侧 div 中。但我无法用我正在做的代码得到结果。我的代码有什么错误吗？我想使用 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 ;  

Answer 1

这是一个简单的示例，在普通 JavaScript 中克隆 HTMLElement:

additional information can be found in 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>