Javascript - Inserting Image Text and description in a container

user_16806131 0
Viewed 164
        <div id="CollectionALL">
            <div id="collection1" class="col">
                <img id="Img1" class="imageCS"/>
                <H1 id="Title1"></H1>
                <p id="Text1"></p>
            </div>
            <div id="collection2" class="col">
                <img id="Img2" class="imageCS"/>
                <H1 id="Title2"></H1>
                <p id="Text2"></p>
            </div>
        </div>

Hi all,

I'm just starting out on javascript and would like to check how i should go about replacing or inserting an image into each of the Img1, Img2 and Img3 tags.

I believe once i'm able to figure out the image, the title and texts should be in the same method?

function displayResult()
{
    var collect1=document.getElementById("img1").rows[0];
    var x=collect1.insertCell(-1);
    x.innerHTML="<img src='img/abc.png' alt='collection1'/>";
}
css html javascript
3 Answers

You need to specify the selectors for h1, p, img inner your container. then you can use setAttribute and innerHTML function to set content.

Then you can wrapped inside a loop and iterate the result array. The example below will shows you how it works inside the loop.

like that

function displayResult()
{
    var collect = document.getElementById("collection1");
 
    let img = collect.querySelector('img');
    let h1 = collect.querySelector('h1');
    let p = collect.querySelector('p');
    img.setAttribute('src', "https://via.placeholder.com/100");
    h1.innerHTML = "collection1";
    p.innerHTML = "some text"
  
}

displayResult()
        <div id="CollectionALL">
            <div id="collection1" class="col">
                <img id="Img1" class="imageCS"/>
                <H1 id="Title1"></H1>
                <p id="Text1"></p>
            </div>
            <div id="collection2" class="col">
                <img id="Img2" class="imageCS"/>
                <H1 id="Title2"></H1>
                <p id="Text2"></p>
            </div>
        </div>

user_148071110

I'm unsure if I understood your question correctly, but if I did I see no use for JS to be used in here. Simply insert your src, title and text through the HTML.

        <div id="CollectionALL">
        <div id="collection1" class="col">
            <img id="Img1" class="imageCS" src="img/abc.png">
            <h1 id="Title1">My Title</h1>
            <p id="Text1">My Text</p>
        </div>
        <div id="collection2" class="col">
            <img id="Img2" class="imageCS" src="img/abc.png>
            <h1 id="Title2">My Title</h1>
            <p id="Text2">My Text</p>
        </div>
    </div>

note that "img" is not a tag with a closing, thus ending it with a />:

            <img id="Img2" class="imageCS"/>

is not quite right. Also, tags in HTML are case-sensitive, and so "H1" is not a valid tag, but "h1" is.

user_178029280 
var ImgA= document.getElementById("Img1");
Img1.src = "abc.jpg";
var TitleA= document.getElementById("Title1");
TitleA.textContent = "Some Title Header Thing";
var TextA= document.getElementById("Text1");
TextA.textContent = "qwerty some text";

I think i'll be doing it this way. Seems to work
Thanks to everyone

user_168061310
Related