js保存html对象,如何从js对象完全创建HTML？

只是一步一步地做。

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

' + post.name + '

' +

'

' + (new Date(post.date.year, post.date.month, post.date.day).toDateString()) + '

' +

'

' +

'

' + post.text + '

';

container.appendChild(div);

});

.card {

border: solid 1px #ccc;

width: 400px

}

.img img {

max-width: 100%

}