将元素插入两个Div

我正在创建表并将其填充为两个div，第一个div是小尺寸，第二个是大视图，其他图形工作正常但元素不工作，它填充最后一个div。 你可以在这里看到代码和示例 。

$("#sample").empty() $("#fulls").empty() var table = document.createElement('table'); table.className="report"; var first = table.insertRow(0); first.className= "headerTable"; var h1 = first.insertCell(0); var h2 = first.insertCell(1); var h3 = first.insertCell(2); var h4 = first.insertCell(3); var h5 = first.insertCell(4); h1.className= "headerTable"; h2.className= "headerTable"; h3.className= "headerTable"; h4.className= "headerTable"; h5.className= "headerTable"; h1.innerHTML = ("Speed"); h2.innerHTML = ("RPM"); h3.innerHTML =("Acc"); h4.innerHTML = ("Brake"); h5.innerHTML =("Dated"); for (var i = 0;i<5;i++) { var first = table.insertRow((i+1)); first.className= "tableRow"; var h1 = first.insertCell(0); var h2 = first.insertCell(1); var h3 = first.insertCell(2); var h4 = first.insertCell(3); var h5 = first.insertCell(4); h1.innerHTML = i; h2.innerHTML = i; h3.innerHTML = i; h4.innerHTML = i; h5.innerHTML= new Date(); } $("#fulls").html(table); $("#sample").html(table); 

我尝试使用javascript但结果相同

 document.getElementById("fulls").innerHTML = table; document.getElementById("sample").innerHTML = table; 

Answer 1

你不能在2个容器中插入一个元素，你需要克隆它

 $("#fulls").html($(table).clone()); //or use cloneNode() like $("#fulls").html(table.cloneNode(true)); $("#sample").html(table); 

演示： 小提琴

将相同的元素实例附加到2个容器时，它将从第一个容器中删除并添加到第二个容器中，因此如果要在两个位置保留副本，则需要克隆该元素。

Answer 2

这应该适合你

 $("#fulls").html(table); $("#sample").html($("#fulls").html()); 

问题是因为您在多个地方只使用了一个table对象。

Answer 3

我想你会需要这样的东西

 var th = document.createElement('th'); var tr = document.createElement('tr'); var tbody = document.createElement('tbody'); var table = document.createElement('table'); table.className = "report"; th.appendChild(img); tr.appendChild(th); tbody.appendChild(tr); table.appendChild(tbody);