Efficient ways to dynamiclly generate nested DIV-structures in Java Script

Question

I've created a simple program, that gets data from a database and displays it in an Instagram post fashion. Everything is working so far, but I hoped to find a more compact way to generate this type of structure. I am using the document.createElement() method to do the job, but the code is very repetitive. Are there other, more prefered ways to accomplish this?

Div structure

My code using document.createElement();

//create post wrapper
newPostWrapper = document.createElement("div");
newPostWrapper.className = "postWrapper";
imageContainer.appendChild(newPostWrapper);

//create image imageamountWRAPPER
newImageAmountWrapper = document.createElement("div");
newImageAmountWrapper.className = "imageamountWRAPPER";
newPostWrapper.appendChild(newImageAmountWrapper);

//create image count
newImageCount = document.createElement("div");
newImageCount.className = "imageamountCOUNT";
newImageCount.innerHTML = "1/2";
newImageAmountWrapper.appendChild(newImageCount);

//create detailsWrapper
newDetailsWrapper = document.createElement("div");
newDetailsWrapper.className = "imageDETAILSWRAPPER";
newPostWrapper.appendChild(newDetailsWrapper);

//createDATEwrapper
newDateWrapper = document.createElement("div");
newDateWrapper.className = "imagedisplayDATEWRAPPER";
newDetailsWrapper.appendChild(newDateWrapper);

//create date
newDate = document.createElement("p");
newDate.className = "imagedisplayDATE";
newDate.innerHTML = imageDate;
newDateWrapper.appendChild(newDate);

//create image wrapper
newImageWrapper = document.createElement("div");
newImageWrapper.className = "imagedisplayWRAPPER";
newImageWrapper.id = "imageWrapper" + i;
newDetailsWrapper.appendChild(newImageWrapper);


//create image
newImage = document.createElement("img");
newImage.className = "imagedisplayIMAGE";
newImage.src = "../../uploads/" + profileContent[i][0];
newImage.id = "img" + i;
newImage.setAttribute('contentID', profileContent[i][1]);
newImageWrapper.appendChild(newImage);


//create descriptionWRAPPER
newDescriptionWrapper = document.createElement("div");
newDescriptionWrapper.className = "descriptionWRAPPER";
newPostWrapper.appendChild(newDescriptionWrapper);

//add description
newDescription = document.createElement("p");
newDescription.className = "description";
newDescription.innerHTML = "A new image for the best community ever!"
newDescriptionWrapper.appendChild(newDescription);

Thanks in advance

Answer 1

I suggest any templating mechanism. There are a lot of JS templating engines such as Angular, React or Vue. If you want to do it just using pure JS, then here is an example what could be done inside the loop,

let imageDate = '2020-07-01';
let imgSrc = 'https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg';
let i = 4; // get it from the loop.
let myContentID = 1234;

let markup = `
<div class="imageContainer">
    <div class="postWrapper">
        <div class="imageamountWRAPPER">
            <div class="imageamountCOUNT">1/2</div>
        </div>
        <div class="imageDETAILSWRAPPER">
            <div class="imagedisplayDATEWRAPPER">
                <div class="imagedisplayDATE">${imageDate}</div>
                <div class="imagedisplayWRAPPER" id="imageWrapper${i}">
                    <img id="img${i}" contentID="${myContentID}" class="imagedisplayIMAGE" src="${imgSrc}" alt="">
                </div>
            </div>
        </div>
        <div class="descriptionWRAPPER">
            <p class="description">A new image for the best community ever!</p>
        </div>
    </div>
</div>
`;

document.body.innerHTML = markup;