innerHTML可以动态吗？

Question

我想在每次点击屏幕时在不同位置追加球，但我无法弄清楚如何写box.innerHTML。

脚本：

var ball = document.getElementById("ball"); 
var box = document.getElementById("box"); 

box.addEventListener("click",function(e){ 
    var x = e.clientX -50; 
    var y = e.clientY -50; 
    box.innerHTML += '<div id="ball" style="left:'x'px;top:'y'px;"></div>'; 

}) 

CSS：

*{ 
    margin: 0; 
    padding: 0; 
} 

    #box { 
     width: 100%; 
     height: 100%; 
     background-color: dimgrey; 
     position: absolute; 
    } 

    #ball { 
     position: absolute; 
     width: 100px; 
     height: 100px; 
     border-radius: 50%; 
     background-color: white; 
    } 

Answer 1

box.innerHTML += '<div id="ball" style="left:' + x + 'px;top:' + y + 'px;"></div>'; 

来连接字符串，你需要添加一个+字符串和您的变量之间。

Answer 2

您的连接错误。请尝试：

box.innerHTML += '<div id="ball" style="left:' + x + 'px;top:' + y + 'px;"></div>'; 

在JavaScript中，您可以使用+连接字符串。

JS Fiddle

Answer 3

这应该工作，

box.innerHTML += '<div id="ball" style="left:' + x + 'px;top:' + y + 'px;"></div>';

的问题是，你的变量x和y被认定为串。使用+，你可以连接它们。

如需进一步信息，我建议在这里阅读有关字符串文字https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals

Answer 4

我认为这是没有必要使用大量的div具有相同的ID。最好定义他们的类

.ball { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background-color: white; 
}  

var box = document.getElementById("box"); 

box.addEventListener("click",function(e){ 
    var x = e.clientX -50; 
    var y = e.clientY -50; 

    var element = document.createElement("div"); 
    element.style.top = y+'px'; 
    element.style.left = x+'px'; 
    element.className = "ball"; 
    box.appendChild(element); 
});