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

Question

我正在努力寻找一种使用javascript为我的网站创建博客文章的方法。我精通javascript，但是除之外我没有使用过许多DOM元素document.getElementById()。我正在寻求有关如何实现将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时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. 对于我的许多其他帖子，我可能有多个段落和/或列表。至少，我想要一种创建一个文本字符串的方法。也许对于列表而言，数组在我的对象中最有用，但是我不确定如何处理多个段落。

我意识到这是很多解释，示例和指南，但是，我非常感谢您的帮助！谢谢！