将div的内容复制到另一个div中

时间:2013-11-24 09:37:30

标签: javascript html

我的网站上有两个div。它们共享相同的css属性,但其中一个拥有24个其他div。我想将所有这24个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>

我希望在页面加载时将mydiv1中的所有24个div复制到mydiv2中。

提前致谢

4 个答案:

答案 0 :(得分:17)

首先,我们将div分配给变量(可选)

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

现在只需将mydiv1的内容分配给mydiv2。

secondDivContent.innerHTML = firstDivContent.innerHTML;

<强>样本 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>

答案 1 :(得分:9)

您可以使用jquery的.ready()事件

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

也是一个有效的DEMO

答案 2 :(得分:2)

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

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

答案 3 :(得分:1)

jquery中的替代方法您可以使用clone并将其放入目标div中。例如:

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

#mydiv1复制到#mydiv2