is there any way we can add HTML element based on some value
for eg, let's say we are unsure of value(i), after some function "i" value is obtained and depending on "i", in different lines value is shown. Something like if i=3,<p>one</p><p>two</p><p>three</p>. if i=5, five
element should be added in HTML structure
Considering it's not a ReactJS project ( because in React it's used states for this kind of approach ), in vanilla javascript and HTML you have to use element.append(newContent)
// get a value, random or not
// example of random 0~9
const numberOfIncludes = parseInt(Math.random()*10);
// create the element to be included
let newContent = '';
for ( let i=0 ; i<numberOfIncludes ; i+=1) {
newContent += '<p>'+i+'</p>';
}
// get the DOM to include
const myWrapper = document.querySelector('body');
// include the content at the bottom
myWrapper.append(newContent);