使用本地存储中的数组动态创建HTML[已关闭]

Question

我正在从本地存储中检索标题、描述和图像，但我不确定如何动态创建HTML来显示它。它应该在订单标题desc中。和图像。我想把它保存为一个网格，这样当多个人提交时看起来很好？它是JSON数据。

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;
}

Answer 1

您可以使用JavaScript DOM元素，检查这些函数document.creatElement（）和node.appendChild（）。

所以它应该是这样的：

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;
}