"getElementByID().innerHTML + .src" объявляют в ОДНОМ ОДНОМ ОДНОМ методе вместо двух разных методов

Question

У меня есть изображения и тексты в виде данных 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>

Answer 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, чтобы их можно было стилизовать вместе.

Answer 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