如何使用Javascript將div添加到html代碼中

Question

我正在嘗試創建一個函數，該函數應該獲取鼠標坐標並使用它們的值繪制一個小半徑並將它們插入到 CSS 左側和頂部位置。 我被困在我應該將我創建的 div 添加到 html 的部分。 如果我說的不夠清楚，請見諒。

              <script type="text/javascript">
           function getcoord(event) {
           var x=event.clientX  ;
           var y=event.clientY  ;
           follow(x,y);
           function follow(xcor,ycor) {
           folowHTML =
'<div style="'background-color:red;width:30px;height:30px;'
   +'border-radius:30px;position:absolute;left:''+xcor;'top:'+ycor';">' 
   +'</div>';
        
          };}
                 </script>
                 <body onmouseover="getcoord(event);">

                  </body>

Answer 1

也許嘗試添加這一行：

document.body.innerHtml = folowHTML + document.body.innerHtml;

另外，我認為您應該將absolute位置更改為fixed位置。

編輯：這是不好的方式

在這里你有答案：在 </body> 標簽之前使用 vanilla JavaScript 插入元素

Answer 2

你可以試試這樣的...

<style>
    #follow {
        background-color: #fff;
        border:1px solid red;
        border-radius: 50%;
        height: 20px;
        margin:-10px 0 0 -10px;
        position: absolute;
        width: 20px;
        z-index: 10;
    }
</style>
<script>
    function initFollow(){

        var follow = document.createElement('div');

        follow.setAttribute('id','follow');
        document.getElementsByTagName("body")[0].appendChild(follow);

        window.addEventListener('mousemove', function(e) {
            var left = e.pageX + 'px',
                top  = e.pageY + 'px';
            follow.style.left = left;
            follow.style.top = top;
        }, false);

    }
    window.addEventListener('load',initFollow,false);
</script>

如何使用Javascript將div添加到html代碼中

問題描述

2 個解決方案

解決方案1
0 2013-02-10 19:36:51

編輯：這是不好的方式

解決方案2
0 2013-02-10 20:36:51

如何使用Javascript將div添加到html代碼中

問題描述

2 個解決方案

解決方案1 0 2013-02-10 19:36:51

編輯：這是不好的方式

解決方案2 0 2013-02-10 20:36:51

解決方案1
0 2013-02-10 19:36:51

解決方案2
0 2013-02-10 20:36:51