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

Question

I have images and texts as json data.

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

I used this approach to parse some json data into image and some into text in my popup window separatly.

to view as an image:

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

to view as a plain text

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

how should i merge this two method into one single output? any Suggestion please? my popup.html

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

Answer 1

To display the image with the title as a caption you want to do something like this:

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

Here's the JS with the elements stored in variables for clarity:

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

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

In your original HTML, you were setting the image source (good) and then by setting host.innerHTML you were replacing the entire <img>. To get around this I wrapped both the img tag and created a new span tag that will hold the image name in another div so they can be styled together.