javascript - 如何从 js 对象完全创建 HTML？

Question

我正在努力寻找一种使用 JavaScript 为我的网站创建博客文章的方法。我对 javascript 非常了解，但是除了 document.getElementById() 之外，我没有使用过很多 DOM 元素。我正在寻求如何实现将 JS 对象转换为帖子的方法的支持。这是一个示例对象:

var posts = {     //My object

firstPost: {      //An example post
  index: 1,       //Identifies order of posts: 1 is oldest... >1 newest
  id: "first", //An id for the post
  date: {         //Date will be listed next to name on post
    month: 11,
    day: 2,
    year: 2018
  },
  name: "My Post",              //Name of the post
  text: "Text for the post...", //Actual Post
  image: 'blogImage.png'        //An image for the post
}

现在我想通过如下所示的函数传递它来创建 HTML:

function assemblePost( index, id, month, day, year, text, image) {
   //DOM GOES IN HERE
} 

以下是我手动键入时 HTML 的外观示例:

<div class="card" id="first"> <!-- Card element links to css -->
    <h2>My Post</h2> <!-- Name of the post -->
    <h5>Posted November 2nd, 2018</h5> <!-- Date of the post -->
    <div class="img" style="height:200px;"><img src="/blogImage.png" ></div>
    <p>Text for the post..."</p> <!-- Actual Post -->
</div>

我不完全确定如何解决这个问题，因为:

1. 类“card”链接到 CSS，我不确定如何使用 DOM 实现它。
2. 我不确定 DOM 是否可以编辑样式，在本例中，图像高度为 200，但在另一个图像中可能会有所不同。
3. 对于我的许多其他帖子，我可能有多个段落和/或列表。至少，我想要一种创建文本字符串的方法。也许对于列表来说，数组在我的对象中最有用，但是我不确定如何处理多个段落。

我意识到其中有很多解释、示例和指南，但我真的很感谢您的帮助!谢谢!

Answer 1

一步一步来。

var posts = [ //My object (array of posts)

  { //An example post
    index: 1, //Identifies order of posts: 1 is oldest... >1 newest
    id: "first", //An id for the post
    date: { //Date will be listed next to name on post
      month: 11,
      day: 2,
      year: 2018
    },
    name: "My Post", //Name of the post
    text: "Text for the post...", //Actual Post
    image: 'blogImage.png' //An image for the post
  },
  { //An example post
    index: 2, //Identifies order of posts: 1 is oldest... >1 newest
    id: "first", //An id for the post
    date: { //Date will be listed next to name on post
      month: 11,
      day: 2,
      year: 2018
    },
    name: "My another Post", //Name of the post
    text: "Text for another post...", //Actual Post
    image: 'blogImage.png' //An image for the post
  }
];
const container = document.getElementById('div-posts');
posts.forEach(function(post) {
  let div = document.createElement('div');
  div.className = 'card';
  div.id = 'post_' + post.index; //or post.id provided itis unique
  //create more elements instead of ".innerHTML" if you wish
  div.innerHTML = '<h2>' + post.name + '</h2>' +
    '<h5>' + (new Date(post.date.year, post.date.month, post.date.day).toDateString()) + '</h5>' +
    '<div class="img"><img src="/' + post.image + '" ></div>' +
    '<p>' + post.text + '</p>';
  container.appendChild(div);
});

.card {
  border: solid 1px #ccc;
  width: 400px
}

.img img {
  max-width: 100%
}

<div id="div-posts"></div>