2013-11-24 4 views
9

Итак, у меня есть два конкретных div на моем сайте. Они оба имеют одни и те же свойства css, но один из них содержит в себе 24 других div. Я хочу, чтобы все эти divs были скопированы в другое погружение. Вот как это выглядит:Скопируйте содержимое div в другой div

<div id="mydiv1"> 
    <div id="div1"> 
    </div> 
    </div id="div2> 
    </div> 
    //and all the way up to div 24. 
</div> 

<div id="mydiv2"> 
</div> 

Так что я хочу, чтобы все 24 дивов жгутов mydiv1 быть скопирован в mydiv2 при загрузке страницы.

Заранее спасибо

ответ

13

Во-первых, мы назначаете дивы в переменных (необязательно)

var firstDivContent = document.getElementById('mydiv1'); 
var secondDivContent = document.getElementById('mydiv2'); 

Теперь просто присвоить содержание mydiv1, чтобы mydiv2.

secondDivContent.innerHTML = firstDivContent.innerHTML; 

DEMO http://jsfiddle.net/GCn8j/

ПОЛНЫЙ КОД

<html> 
<head> 
    <script type="text/javascript"> 
    function copyDiv(){ 
     var firstDivContent = document.getElementById('mydiv1'); 
     var secondDivContent = document.getElementById('mydiv2'); 
     secondDivContent.innerHTML = firstDivContent.innerHTML; 
    } 
    </script> 
</head> 
<body onload="copyDiv();"> 
    <div id="mydiv1"> 
     <div id="div1"> 
     </div> 
     <div id="div2"> 
     </div> 
    </div> 

    <div id="mydiv2"> 
    </div> 
</body> 
</html> 
+0

Не забудьте уаг firstDivContent и так далее. Выявление переменных в глобальной области - это плохая практика. –

+3

Это не работает, 'innerHTML' возвращает строку, не ссылающуюся на свойство элемента –

+0

@EricHerlitz Спасибо, что предупредили меня о' var's. –

7

Вы можете использовать .ready() событие JQuery

jQuery(document).ready(function() { 
    jQuery('.div1').html(jQuery("#div2").html()); 
} 

Также работает DEMO.

2
var divs = document.getElementById('mydiv1').innerHTML; 

document.getElementById('mydiv2').innerHTML= divs; 
1

Альтернатива в JQuery Вы можете использовать clone и положить его в целевых делах. Пример:

$('#mydiv1').clone().appendTo('#mydiv2'); 

Копия #mydiv1 в #mydiv2

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