Javascript 使用本地存储中的数组动态创建HTML

我试图从本地存储中检索从表单保存的标题、描述和图像，但我不确定如何动态创建HTML来显示它

function readData() {
 var formData={};
 formData.title = document.getElementById("title").value;
 formData.desc = document.getElementById("desc").value;
 formData.img= document.getElementById("img").files[0].name;
 return formData;
}


function displayBlog(){
  var retrievedObject =JSON.parse(localStorage.getItem("blogData"));
  var blogs1 = '';
  for (blogpost of blogpost1) {
    blogs1 += '<div>' +
    '<div class="card border-secondary mb-3">' +
    '<h5 class="card-header"></p></h5>' +
    '<div class="card-body">' +
    '<div class="blog-post">' +
    '<h2 class="blog-post-title"></h2><br>' +
    '</p>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div><br></br>'
}
document.getElementById("blogs").innerHTML = blogs1;
}

函数readData（）{
var formData={}；
formData.title=document.getElementById（“title”）.value；
formData.desc=document.getElementById（“desc”）.value；
formData.img=document.getElementById（“img”）.files[0]。名称；
返回表单数据；
}
函数displayBlog（）{
var retrievedObject=JSON.parse（localStorage.getItem（“blogData”）；
var blogs1=''；
对于（blogpost的blogpost 1）{
blogs1+=''+
'' +
“
”+
'' +
'' +
“
”+
“
”+
'' +
'' +
'' +
“

”
}
document.getElementById（“blogs”）.innerHTML=blogs1；
}

您可以使用JavaScript DOM元素，检查这些函数和

所以会是这样的：

function displayBlog() {
  var retrievedObject =JSON.parse(localStorage.getItem("blogData"));
  var blogs1 = document.createElement('div'); // container div
  for (blogpost of blogpost1) {
    var parentDiv = document.createElement('div'); // create parent div
    parentDiv.className = 'card border-secondary mb-3'; // set parent div class names

    // then here you create yor child tags, for example:
    var h5 = document.createElement('h5');
    h5.className = 'card-header';
    h5.innerHTML = blogpost.title; // set the title here from your variable

    // and next you append your child tag to the parent:
    parentDiv.appendChild(h5);

    // then you go on building your desired structure...

    // when done you append your parentDiv from this loop iteraction to your container variable
    blogs1.appendChild(parentDiv);
  }

  // at the end you set your container HTML to this element
  document.getElementById("blogs").innerHTML = blogs1.outerHTML;
}

---

为我工作！谢谢你的评论！关于如何显示我从表单收到的图像，有什么建议吗？