Как полностью создать HTML из объекта JS?

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, когда я набираю его вручную:

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