Javascript 在提交单击的确切位置创建div？

我正试图创建一个div，它正好在提交单击的位置，下面是我的尝试，但什么也没有发生。有人能告诉我为什么吗

html:

---

这将在父（浅蓝色）分区中单击鼠标的位置创建子分区。子分区的左上角将是单击鼠标的位置，但如果需要，可以通过考虑新子分区的高度和宽度来调整该位置

document.getElementById（“landingPad”）.addEventListener（“单击”），函数（事件）{
var newDiv=document.createElement（“div”）；
newDiv.classList.add（“adddiv”）；
newDiv.style.left=event.clientX-this.offsetLeft+“px”；
newDiv.style.top=event.clientY-this.offsetTop+“px”；
这个.appendChild（newDiv）；
});
#着陆平台{
高度：300px；
宽度：300px；
背景色：aliceblue；
位置：相对位置；
}
A.Addediv{
高度：30px；
宽度：30px；
背景颜色：蓝色；
位置：绝对位置；
}
您的代码没有为
posX
和
posY
设置值

试试这个JavaScript。之后，随你所想而改变

var commentBox = $('#commentBox');  
var offset = -10;   
var posX = 10, posY = 10;
var boxCount = 0;

commentBox.click(function(e){
    $('#commentArea').append('<div class="box-' + boxCount + '">' + boxCount + '</div>');
    $('.box-' + boxCount).offset({
        top: posY * boxCount,
        left: posX * boxCount
    });
    boxCount++;     
});

var commentBox=$（'#commentBox'）；
var偏移量=-10；
var posX=10，posY=10；
var-boxCount=0；
注释框。单击（函数（e）{
$（'#commentArea'）。追加（''+boxCount+''）；
$（'.box-'+boxCount）.偏移量({
顶部：posY*boxCount，
左：posX*boxCount
});
boxCount++；
});
正如Hanlet所解释的那样。如果您查看DOM，就会发生一些事情

现在，您还可以强制它可视化一些元素，您将看到发生了什么


我变了

$('#commentArea').append('<div class="box-' + boxCount + '"></div>');

$（'#commentArea'）。附加（''）；

到

$（'#commentArea'）。附加（''）；

因此，它的类是相同的，它可以可视化，以及一些CSS。id属性是动态的。
您能在jsfiddle/stack代码段上提供实时演示吗？第一个问题是您正在追加文本，因此您追加的div不是DOM的一部分。您需要将其添加到DOM中，然后可以通过“.box-etc…”精确定义来访问div。准确地显示在屏幕上，这样滚动就不会影响它（固定）相对于其他元素或窗口的准确度。“有什么”正在实际发生，但div是空的！试试这个：它有问题。点击添加框。
#commentBox,
[class^=box] {
    width: 200px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    display: inline-block;
    z-index: 60;
    float: left;
}

[class^=box] {
    z-index: 1;
}

var commentBox = $('#commentBox');  
var offset = -10;   
var posX = 10, posY = 10;
var boxCount = 0;

commentBox.click(function(e){
    $('#commentArea').append('<div class="box-' + boxCount + '">' + boxCount + '</div>');
    $('.box-' + boxCount).offset({
        top: posY * boxCount,
        left: posX * boxCount
    });
    boxCount++;     
});

$('#commentArea').append('<div class="box-' + boxCount + '"></div>');

$('#commentArea').append('<div id="box-' + boxCount + '" class="box"></div>');