Fatal编程技术网
  • javascript/
  • Javascript 为什么'card'元素没有重复4次

Javascript 为什么'card'元素没有重复4次

javascript jquery

Javascript 为什么'card'元素没有重复4次,javascript,jquery,Javascript,Jquery,为什么卡元素没有重复4次 function generate4Cards（）{ 对于（变量i=0；i

为什么
卡
元素没有重复4次



function generate4Cards（）{
对于（变量i=0；i<4；i++）{
var card=document.getElementById（'card'）；
文件.正文.附件（卡片）；
}
}



我是一张卡片

foo.append（bar）
将
bar
放在
foo
的末尾

如果我把车停在路的尽头，然后把车停在车道的尽头，那么我就没有两辆车了


附加
仅将
条形图
放置在您告诉它的位置


它不会复制它，因为它不应该复制。
当您使用现有元素调用
appendChild
时，该元素将从其在DOM中的先前位置移除并附加到新容器中。您必须在每次迭代中显式地创建
div

但是，在单个文档中具有重复id是无效的HTML，因此最好删除
id
（或者改用类）：



for（变量i=0；i<4；i++）{
var card=document.createElement（'div'）；
card.textContent='我是一张卡'；
文件.正文.附件（卡片）；

}
这是您要查找的示例代码-


<html>
<head>
<script>
function generate4Cards() {
    for (var i = 0; i < 4; i++) {
      var card = document.createElement('div');
      card.textContent = 'I am a card';
      document.getElementById('cardHolder').appendChild(card);
    }
}
</script>
</head>
<body onload="generate4Cards()>
<div id="cardHolder"></div>
</body>
</html>




函数generate4Cards（）{
对于（变量i=0；i<4；i++）{
var card=document.createElement（'div'）；
card.textContent='我是一张卡'；
文件.getElementById（“持卡人”）.appendChild（卡）；
}
}

因为
appendChild
不复制元素。它只是将它们连接到一个特定的位置。如果你想要其中的4个，你需要克隆它们。虽然你实际上需要一个CSS样式的卡片：P