将jQuery转换为原始Javascript

我有一些jQuery代码，我想将其更改为原始JavaScript形式，但我很难找到构成此jQuery代码的相应元素

$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
$('#drop'+i).css('left',dropLeft);
$('#drop'+i).css('top',dropTop);

$（'.rain'）。追加（''）；
$（'#drop'+i）.css（'左'，dropLeft）；
$（'#drop'+i）.css（'top'，dropTop）；

我不知道如何将它改回Javascript，任何帮助都将不胜感激

const dropDiv = document.createElement('div')
dropDiv.className = 'drop'
dropDiv.id = 'drop' + i
dropDiv.style.left = dropLeft
dropDiv.style.top = dropTop
document.querySelector('.rain').appendChild(dropDiv)

const dropLeft=5；
常数dropTop=5；
const rain=document.querySelector（'.rain'）；
for（设i=0；i<5；i++）{
let drop=document.createElement（'div'）；
setAttribute（'class'，'drop'）；
setAttribute（'id'，'drop'+i）；
让dropText=document.createTextNode（i）；
drop.style.left=（dropLeft*i*10）+“px”；
drop.style.top=（dropTop*i*10）+'px'；
drop.appendChild（dropText）；
雨滴；
}

.drop{
位置：绝对位置；
背景：蓝色；
宽度：20px；
高度：20px；
边界半径：20px；
颜色：白色；
文本对齐：居中；
}

---

欢迎来到堆栈溢出！请通读，特别是做你的研究，为相关的主题，所以，给它一个尝试。如果你在做了更多的研究和搜索后陷入困境，无法摆脱困境，请发布一份你的尝试，并明确指出你陷入困境的地方。人们会乐意帮忙的。祝你好运在您的问题中，JavaScript没有任何问题。jQuery是一个库，而不是一种语言。您要做的是使用jQuery将JavaScript代码更改为使用DOM API的JavaScript代码。类选择器很可能不仅匹配一个element@Andreas

querySelector

选择一个，而

queryselectoral

选择所有。所以这将选择一个正确的选项？@sabithpocker

.querySelector（）

只返回第一个匹配的元素，

.querySelector（）返回一个包含所有匹配元素的
节点列表。好的。那么你最初的评论是指什么？sabithpocker：可能是因为jQuery代码会在每个匹配的元素后面附加一个
div
；上面只在第一个匹配元素后面添加一个
div
。