title: Create dynamic gridview and automatically refresh all items in html page using java script
body: <p>I am trying to build a blog website using html and javascript where I add blogs contains titles, paragraphs &amp; pictures using the form submit button.
  Here listofobject I take it as a list and depends on number of items of the list gridview automatically generate using javascript code:-</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import blogger from "./blogger.js";
  
  
  let listOfObjects = [];
  
  
  
  const validate =
    function valid() {
  
  
      let title = document.getElementById("title").value;
  
  
  
      let textarea = document.getElementById("textarea1").value;
  
  
  
      let image = document.getElementById("myimage").value;
      // alert("Welcome to External JS file 4")
  
      var obj = new blogger(
  
        title,
        textarea,
        image
  
      );
  
      listOfObjects.push(obj);
  
  
  
  
  
  
  
  
      grid(main, listOfObjects)
  
  
    }
  
  const form = document.getElementById('add-blog-form');
  form.onsubmit = validate;
  
  const main = document.querySelector(".maincontent");
  
  window.onload = grid(main, listOfObjects);
  
  function grid(main, list) {
  
    let container = document.createElement("div");
    container.id = "maingrid";
  
    container.className = "container";
    main.appendChild(container);
    let maingrid = document.getElementById('maingrid');
    let keys = Object.keys(list);
    let len = keys.length
  
    for (var i = 0; i &lt; len; i++) {
      let row = document.createElement("div");
      // row.classList.add('row row-cols-auto');
      row.className = "row";
      row.id = "row" + i;
      maingrid.appendChild(row);
      let roww = document.getElementById('row' + i);
      for (var j = 0; j &lt; 1; j++) {
        let box = document.createElement("div");
        box.className = "col";
        // box.classList.add('rightcolumn');
        box.id = "col" + j;
        roww.appendChild(box);
        let h1 = document.createElement("H1");
        h1.setAttribute("style", "color:black;font-size:24px;");
        // h1.setAttribute("class", "blogheading");
        let h1id = "h1" + j;
        h1.setAttribute("id", h1id);
        let xContent = document.createTextNode(list[i].title);
        h1.appendChild(xContent);
        box.appendChild(h1);
  
        let p = document.createElement("P");
        p.setAttribute("style", "black:white;font-size:24px;");
        var pid = "p" + j;
        p.setAttribute("id", pid);
        let pcontent = document.createTextNode(list[i].textarea);
        p.appendChild(pcontent);
        box.appendChild(p);
  
        let img = document.createElement('img');
        let imgid = "img" + j;
        img.setAttribute("id", imgid);
        img.setAttribute('alt', '')
        img.setAttribute('loading', 'lazy')
        img.style.height = "300px"
        img.style.width = "300px"
        img.src = list[i].image;
        // 'https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg';
        box.appendChild(img);
  
  
  
      }
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /&gt;
  
  &lt;div class="container1 "&gt;
    &lt;form class="form-group" id="add-blog-form" action="AddBloggs.html"&gt;
      &lt;h2&gt;Blogger Page&lt;/h2&gt;
      &lt;label&gt;Title&lt;/label&gt;
      &lt;input type="text" name="Title" id="title" class="form-control" /&gt;&lt;br /&gt;
      &lt;label&gt;TextArea&lt;/label&gt;
      &lt;textarea name="comment" id="textarea1" placeholder="Text" class="form-control "&gt;&lt;/textarea&gt;
      &lt;br /&gt;
      &lt;label&gt;Image&lt;/label&gt;
      &lt;input type="text" name="myImage" id="myimage" placeholder="URL" class="form-control " /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
  
      &lt;input type="submit" value="submit" class="btn btn-success " /&gt;
      &lt;input type="reset" value="reset" class="btn btn-info" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;main class="maincontent"&gt;&lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am unable to see any data in html page. I debugged my code and I am able to add successfully in listofobject. I hope my html code for grid generation is the correct only thing I am unable to add a class of bootstrap to my grid row and column. I have a doubt as to if I am calling grid generation function in valid() method thus why it is unable to show in html. I mean is there any scope problem.
  Could you please help in this regards?
  Thank you</p>