Javascript 获取[object HTMLImageElement]而不是图像

我正在修改我的网站，我想在那里有一个minecraft服务器状态小部件，我从MCAPI.net找到了一个非常好的小部件。他们有一个演示HTML+JS代码，我用过并修改过以供自己使用。代码将所有内容都写为文本，向上表示在线，向下表示离线，但我不希望看到枯燥的旧文本，而是想要一个图像，绿色表示向上，红色表示向下。我在谷歌上搜索了如何获得

innerHTML

来显示一幅图像，在进行了大量的搜索之后，我没有收到任何错误消息，而是得到了[object HTMLImageElement]。。现在我被卡住了

完整代码（它包含在它自己的HTML文件中，我将在它进入主站点时将其复制/粘贴到它自己的JS中）：

玩家：/
MinecraftAPI.getServerStatus（'porotrails.com'{
},
功能（错误、状态）{
var up=新图像（）；
var down=新图像（）；
up.src=“images/up.png”；
down.src=“images/down.png”；
如果（错误）{
return document.querySelector（'.server status'）。innerHTML='Error'；
}
document.querySelector（'.server online'）。innerHTML=status.online？向上：向下；
document.querySelector（'.players online'）.innerHTML=status.players.now；
document.querySelector（'.players-max'）。innerHTML=status.players.max；
});

问题是，在使用

.innerHTML（）

时，应该提供

string

值成为相关元素的内容，但 您正在使用W3CDOM标准方法创建新元素 节点，将该对象传递给

innerHTML（）

方法时 JavaScript运行时，将其转换为字符串，结果为 该对象的描述（对象HTMLImageElement）

你可以用两种方法中的一种来解决你的问题

不要使用

.innerHTML（）

，而是使用

.appendChild（）

.appendChild（）

希望将对象引用传递给它，因为您已经创建了显式对象实例（

up

和

down

），所以可以传递这些实例

使用

.innerHTML（）

并创建字符串值。执行此操作时，您自己生成HTML并将其作为字符串传递

下面，我调整了您的代码以使用方法2，但也为解决方案1添加了注释代码

玩家：/
MinecraftAPI.getServerStatus（'porotrails.com'{
},
功能（错误、状态）{
//解决方案1：将字符串传递给innerHTML
var up=“”；
var-down=“”；
//解决方案2：使用DOM创建图像元素节点，并使用DOM插入
//var up=新图像（）；
//var down=新图像（）；
//up.src='images/up.png'；
//down.src='images/down.png'；
如果（错误）{
return document.querySelector（'.server status'）。innerHTML='Error'；
}
//解决方案1：
document.querySelector（'.server online'）。innerHTML=status.online？向上：向下；
//解决方案2：
//document.querySelector（'.server online'）.appendChild（status.online？up:down）；
document.querySelector（'.players online'）.innerHTML=status.players.now；
document.querySelector（'.players-max'）。innerHTML=status.players.max；
});

up

和

down

是

HTMLImageElement

对象，而不是HTML字符串。将它们分配给

innerHTML

会将它们强制转换为字符串，从而从此行生成

[object HTMLImageElement]

：

document.querySelector('.server-online').innerHTML = status.online ? up : down;

请尝试以下方法：

var serverOnline = document.querySelector('.server-online');
// Remove any children (unnecessary if always empty before hand).
serverOnline.innerHTML = '';
// Append the image element.
serverOnline.appendChild(status.online ? up : down);

或者，您可以创建

up

和

down

HTML字符串

var up = '<img src="images/up.png" />';
var down = '<img src="images/down.png" />';

var up=''；
var-down=''；

问题是，当您更改

innerHTML

时，它需要一个字符串，但

up

和

down

是图像对象。您可以使用

appendChild

将图像添加到元素中，而不是更改

innerHTML

替换

document.querySelector('.server-online').innerHTML = status.online ? up : down;

与

在附加图像之前，必须清除容器中的内容，以便在状态更改时删除旧图像

var container = document.querySelector('.server-online');
container.innerHTML = "";
container.appendChild(status.online ? up : down);