在javascript中向div标签添加新元素答案

【问题标题】：adding new elements to a div tag in javascript在javascript中向div标签添加新元素
【发布时间】：2019-07-05 01:19:22
【问题描述】：

我正在尝试使用 javascript 制作一些看起来像雨的背景动画（水滴从上到下无限下落）。但它不起作用。我不知道问题出在哪里。

function add(){
  var div = document.createElement("div");
  div.style.width = "1px";
  div.style.height = '7%';
  div.style.background = 'linear-gradient(rgba(255,255,255,0) 0%, #ffffff 75%, #ffffff 100%)';
  div.style.position = 'absolute';
  div.style.animation = 'spin 4s infinite';
  div.style.transition =  'all 3s';

  var l = 10;

  for (var i;i<20;i=i+1){
    div.style.left = toString(l+10)+'px';
    div.style.animationDelay = toStrin(Math.random() * 10) + 's';
    document.getElementsClass("back").appendChild(div);
  }
}

window.onload = function(){
  add();
}

body{
  background-color: #000;
}
@keyframes spin{
  0%{
    top: -20px;
  }
  100%{
    top:90%;
    background-color: #000;
  }
}

<!DOCTYPE html>
<html>
<head>
	<title>Trail</title>
</head>
<body>
		<div class="back"></div>
</body>
</html>

我卡在这里很久了，请大家帮忙！！！

【问题讨论】：

你的动画应该是什么样子，到底什么不工作？
如果您有完整的工作代码，请使用<> 按钮将其作为sn-p 发布。这次是我为你制作的。
什么是document.getElementsClass("back")
修复后的另一个问题是，您正在一遍又一遍地调整同一个元素的位置并附加同一个元素。
有一些基本的 javascript 错误。 var i 未初始化，也未使用。并且不清楚你想做什么样的动画？

标签： javascript html css

【解决方案1】：

你这里有很多错误。

您已初始化 i 但未分配默认值
document.getElementsClass("back").appendChild(div) 是错误的。像这样使用document.getElementsByClassName("back")[0].appendChild(div);
你必须使用(num).toString()，不像你使用的方式

function add(){


var l = 10;

for (var i=0;i<20;i=i+1){
  var div = document.createElement("div");
var node = document.createTextNode("This is new.");
div.appendChild(node);
div.style.width = "1px";
div.style.height = '7%';
div.style.background = 'linear-gradient(rgba(255,255,255,0) 0%, #ffffff 75%, #ffffff 100%)';
div.style.position = 'absolute';
div.style.animation = 'spin 4s infinite';
div.style.transition =  'all 3s';
div.style.color = '#ffffff';
    div.style.left = (l+(i*10)).toString()+'px';
    div.style.animationDelay = (Math.random() * 10).toString() + 's';
    document.getElementById("back").appendChild(div);
}
}
window.onload = function(){
  add();
}

body{
  background-color: #000;
}
@keyframes spin{
  0%{
    top: -20px;
  }
  100%{
    top:90%;
    background-color: #000;
  }
}

&lt;div id="back"&gt;&lt;/div&gt;

【讨论】：

仍有问题
你能解释一下这些问题吗？
阅读我在原帖下的第二条评论
OP 想要添加一堆元素并让它们在不同的时间制作动画。如果只有一个，for 循环就没有意义。