“getElementByID().innerHTML + .src”在一个方法中声明，而不是两种不同的方法

Posted 2023-05-07

【中文标题】“getElementByID().innerHTML + .src”在一个方法中声明，而不是两种不同的方法

【英文标题】："getElementByID().innerHTML + .src" declare in ONE SINGLE method instead two different methods

【发布时间】：2015-12-20 19:55:20

【问题描述】：

我有图像和文本作为 json 数据。

"imageCollection": 
"Name": "Anna",
"imageUrl":"https://xxx/xxx/img.jpg?t=5657565",
,

我使用这种方法将一些 json 数据分别解析为图像和弹出窗口中的文本。

以图像形式查看：

document.getElementById("img").src=                    
jsonData.imageCollection.logo; 

以纯文本形式查看

document.getElementById("host").innerhtml= 
jsonData.imageCollection.Name

我应该如何将这两种方法合并为一个输出？请问有什么建议吗？我的popup.html

<div id="host">
 <image id="img"></image>
</div>

【问题讨论】：

我不知道你在期待什么。这个问题有点不清楚。

Parse json data to view as an image in chrome extension 的可能重复项

您的问题是什么？如何同时显示图像和名称？

连接这两行并将它们包装在function () 中是否有问题？

@sqykly 是的，我无法将它们包装在一起

【参考方案1】：

要将带有标题的图像显示为标题，您需要执行以下操作：

<div class="popup">
    <img id="img" />
    <span id="host"></span>
</div>

为了清楚起见，这是将元素存储在变量中的 JS：

var image = document.getElementById('img');
var host = document.getElementById('host');

image.src = jsonData.imageCollection.logo;
host.innerHTML = jsonData.imageCollection.Name;

在您的原始 HTML 中，您设置了图像源（很好），然后通过设置 host.innerHTML，您将替换整个 <img>。为了解决这个问题，我包装了 img 标签并创建了一个新的 span 标签，它将图像名称保存在另一个 div 中，以便它们可以一起设置样式。

【参考方案2】：

你在寻找这样的东西吗？

<div id="host">
 <image id="img"></image>
 <div id="nme"></name>
</div>

document.getElementById("img").src = jsonData.imageCollection.logo; 

document.getElementById("nme").innerHTML= jsonData.imageCollection.Name

【讨论】：

我已经有这堆代码了。但我需要将它们合并为一个。当我运行代码时，只有最后一个方法是 beig 声明的，但我需要从 json 数据中同时显示它们的图像 + 文本

这与您的代码不同 - 我有一个额外的 标记并且使用的 Id 不同。此代码将显示带有下方文本的图像。请在标记之前阅读并理解代码