时间戳

首页 > 解决方案 > 使用本地存储中的数组动态创建 HTML

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

更新：最终使用

document.body.appendChild(btn);

经过研究

标签： javascripthtml

解决方案

您可以使用 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;
}

推荐阅读