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

【问题标题】："getElementByID().innerHTML + .src" declare in ONE SINGLE method instead two different methods“getElementByID().innerHTML + .src”在一个方法中声明，而不是两种不同的方法
【发布时间】：2023-03-11 15:03:01
【问题描述】：

我有图像和文本作为 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 是的，我无法将它们包装在一起

标签： javascript json innerhtml getelementbyid src

【解决方案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 不同。此代码将显示带有下方文本的图像。请在标记之前阅读并理解代码