Javascript - Inserting Image Text and description in a container-CodePudding

        <div id="CollectionALL">
            <div id="collection1" >
                <img id="Img1" />
                <H1 id="Title1"></H1>
                <p id="Text1"></p>
            </div>
            <div id="collection2" >
                <img id="Img2" />
                <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'/>";
}

CodePudding user response：

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" >
                <img id="Img1" />
                <H1 id="Title1"></H1>
                <p id="Text1"></p>
            </div>
            <div id="collection2" >
                <img id="Img2" />
                <H1 id="Title2"></H1>
                <p id="Text2"></p>
            </div>
        </div>

CodePudding user response：

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" >
            <img id="Img1"  src="img/abc.png">
            <h1 id="Title1">My Title</h1>
            <p id="Text1">My Text</p>
        </div>
        <div id="collection2" >
            <img id="Img2"  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" />

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

CodePudding user response：

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