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

Question

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

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

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

查看图像：

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

以纯文本形式查看

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

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

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

Answer 1

您在找这样的东西吗？

<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

Answer 2

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

<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 中，以便它们可以一起设置样式。

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

"getElementByID().innerHTML + .src" declare in ONE SINGLE method instead two different methods

javascript

json

innerhtml

getelementbyid

src