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

这是一个在vanilla javascript中克隆HTMLElement的简单示例：

其他信息可在MDN
中找到

＆＃13;

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);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

使用jQuery，你可以这样做：

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

从这个问题中找到：Copy the content of a div into another div。

你实际上并没有提供很多细节，因此我可以发布最好的信息，希望它有所帮助!!

Answer 3

如果你在页面上有第二个div，你可以试试这个。

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

这会将FirstDiv中的任何内容复制到Second。 lmk如果有效。

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

3 个答案: