javascript - 使用对象方法设置 html 值真的很奇怪

Question

我最近才开始学习 JS，尽管我对其他语言的编码并不陌生，但 JS 经常让我感到困惑。

如果我创建多个对象，构造函数的“CarFail”版本(不使用 JQuery)将不起作用(仅创建一个对象时效果很好)。构造函数的第二个“汽车”版本(使用 JQuery)效果很好。

我不明白为什么第一个构造函数版本失败。

我显然遗漏了一些微不足道的东西。

<div id="main"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

    function CarFail(x,y)
    {
        this.x=x;
        this.y=y;

        document.getElementById("main").innerHTML += '<img src="http://nostarch.com/images/car.png"/>';

        this.gelement=document.getElementById("main").lastChild;

        this.draw=function()
        {
            this.gelement.style.position="absolute";
            this.gelement.style.top=this.y+"px";
            this.gelement.style.left=this.x+"px";
        };
        this.draw();
    }

    function Car(x,y)
    {
        this.x=x;
        this.y=y;

        var carhtml = '<img src="http://nostarch.com/images/car.png"/>';

        this.gelement = $(carhtml);

        this.draw=function()
        {
            this.gelement.css({
                position: "absolute",
                left: this.x,
                top:this.y
            });
        };

        $("#main").append(this.gelement);
        this.draw();
    }

    var car1 = new Car(10,20);
    var car2 = new Car(50,90);

    car1.x=150;
    car1.draw();

</script>

Answer 1

重写 innerHTML 会更改该元素下的整个文档层次结构，因此之前存储的任何引用都会丢失。

我建议您改为使用 DOM 方法

let img = document.createElement('img')
img.src = 'http://nostarch.com/images/car.png'
this.gelement = document.getElementById("main").appendChild(img)