Я хочу клонировать изображения 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 ;
3 ответа
Вот простой пример, который клонирует 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>
С помощью jQuery вы можете сделать это так:
$('#div2').html($('#div1').html());
Который найден в этом вопросе: Скопируйте содержимое div в еще один div.
На самом деле вы не предоставляете много подробностей, поэтому я могу опубликовать лучшее, надеюсь, это поможет !!
Вы можете просто попробовать это, если у вас есть второй div на странице.
document.getElementById("SecondDv").innerHTML = document.getElementById("FirstDv").innerHTML;
Это скопирует все, что есть в FirstDiv, во Second. ЛМК, если это работает.
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.