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

17

我的网站上有两个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中。

提前致谢。

5个回答

33

首先,我们将 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>

不要忘记 var firstDivContent 等等。将变量暴露到全局范围是不好的编程实践。 - Eric Herlitz
4
这并不会真正起作用,innerHTML 返回的是一个字符串,而不是元素属性的引用。 - php_nub_qq
@EricHerlitz 感谢您提醒我关于 var 的问题。 - Aycan Yaşıt
做得很好,就像我想要的一样。谢谢! - Hwende
这样怎么样,我还想复制子元素的属性和属性?http://jsfiddle.net/GCn8j/2/ - Luc
显示剩余4条评论

10
你可以使用jquery的.ready()事件。
jQuery(document).ready(function() {
    jQuery('.div1').html(jQuery("#div2").html());
}

还有一个可以工作的演示


2

在2022年试一试这个。

let clonedDiv = document.getElementById('myDiv').cloneNode(true);
document.body.appendChild(clonedDiv);

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

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

0

jQuery中的替代方法是使用clone并将其放入目标div中。例如:

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

#mydiv1 复制到 #mydiv2


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接