将元素插入两个Div [英] insert Element into two 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）; （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; 
  

解决方案

你需要克隆它像

$ p $ $（＃fulls）。html（$（table）.clone（））;
//或使用cloneNode（），如$（＃fulls）。html（table.cloneNode（true））;
$（＃sample）。html（table）;


演示：小提琴

当您将相同的元素实例附加到2个容器时，它将从第一个容器中移除并添加到第二个容器中，所以如果您想要在你需要克隆该元素的地方保留一份副本。

i am creating table and populate it into two divs, first div is in small size and second one for large view , other graphs works fine but element not working, its populate the last div. as you can see the code and sample here.

$("#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);

and i tried with javascript but same result

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

解决方案

You can't insert an element in 2 containers, you need to clone it like

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

Demo: Fiddle

When you append the same element instance to 2 containers, it is removed from first one and is added to the second one, so if you want to keep a copy in both the places you need to clone that element.

这篇关于将元素插入两个Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！