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

Я хочу клонировать изображения div leftSide в div rightSide. При каждом нажатии на тело изображения слева div должны быть клонированы в правый div. Но я не могу получить результат с кодом, который я делаю. Есть ли ошибка в моем коде? Я хочу использовать JavaScript.Как клонировать содержимое 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 ;

источник

2015-12-18 Joy

Не могли бы вы поделиться код Div также? Или вы можете просто попробовать это, если у вас есть второй div на странице. document.getElementById ('' SecondDv "). innerHTML = document.getElementById ('' FirstDv). innerHTML; Это скопирует все, что есть в FirstDiv, во Второе. – pratikpawar

Не могли бы вы предоставить более подробную информацию о том, что у вас есть и что вы хотите сделать? –

Я голосую за открытие, потому что решения jQuery не задают вопрос, который специально запрашивает Javascript. –

Вот простой пример, который клонирует в 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>

источник

2015-12-18 19:52:29 Hitmands

С JQuery, вы можете сделать это Кики, что:

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

, который находится по этому вопросу: Copy the content of a div into another div.

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

источник

2015-12-18 19:47:59 gsamaras

Имейте в виду, что OP говорит в JavaScript, может также предоставить альтернативу – AGE

@AGE да, tha'ts JS. – gsamaras

Это на самом деле JQuery, но это также JS, я просто говорю, поскольку OP кажется, что кто-то путается о простом кодировании – AGE

Не могли бы вы также предоставить код div? Или вы можете просто попробовать это, если у вас есть второй div на странице.

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

Это скопирует все, что есть в FirstDiv, в Second. lmk, если он работает.

источник

2015-12-18 19:50:12 pratikpawar

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

ответ

Смежные вопросы