来自一系列对象的JavaScript中的内容 [英] Content in JavaScript from an array of objects

问题描述

我是一个新的JavaScript，我想这样做：我有一个数组与对象（一个对象有一个标题，封面，作者和评级），我想填充这些对象的div，每个对象一个div。但是，我不知道如何为每个div创建新的元素（h1，p，img）。这是我的第一个尝试：

  //显示booksvar容器= document.getElementById（'books-container'）; function displayBooks（arr） {arr.forEach（function（item）{var bookRow = document.createElement（'div'）; bookRow.className =row; container.appendChild（bookRow）; var imgColumn = document.createElement（'div'）; imgColumn .className =large-4 columns; bookRow.appendChild（imgColumn）; var imgBook = document.createElement（'img'）; imgBook.className =book-img; imgColumn.appendChild（imgBook）; var bookColumn = document .createElement（'div'）; bookColumn.className =large-8 columns; bookRow.appendChild（bookColumn）; var title = document.createElement（'h3'）; title.innerText = item.title; bookColumn.appendChild title）; var author = document.createElement（'p'）; author.innerText = item.autho R等bookColumn.appendChild（作者）; var rating = document.createElement（'p'）; rating.innerText = item.rating; bookColumn.appendChild（等级）; var input = document.createElement（'input'）; input.type =checkbox; input.className =checked; bookColumn.appendChild（输入）; var wishBtn = document.createElement（'button'）; wishBtn.innerText =加入心愿单 bookColumn.appendChild（wishBtn）; var hr = document.createElement（'hr'）; bookRow.appendChild（小时）; }）; }; displayBooks（books）;  

但是我觉得有一个更简单的方法。

我不能使用任何库。这是一个家庭作业，我只能使用JavaScript本身提供的功能和对象。

解决方案

附加原始HTML。在这种情况下，它可能会有点丑陋，但是比元素更加干净。

  c> var container = document。 getElementById（'container'）
 
 var books = [
 {title：'Catch-22'，
 author：'Joseph Heller'
}，
 {title：'The Road'，
 author：'Cormac McCarthy'
} 
]; 
 
 function bookItem（item）{
 return< h1> + item.title +< / h1>< p> + item.author +< / p>< br /> 
} 
 
 books.forEach（function（book）{
 var new_div = document.createElement（'div'）
 new_div.innerHTML = bookItem（book）
 container.appendChild（new_div）
}）
  

JSFiddle

I'm new to JavaScript and I want to do this: I have an array with objects (an object has a title, cover, author and rating) and I want to populate divs with these objects, one div per object. But I don't know how can I do this without creating new elements (h1, p, img) for every div. This is my first attempt:

// Display the books
var container = document.getElementById('books-container');
function displayBooks(arr) {
	arr.forEach(function(item) {
		var bookRow = document.createElement('div');
		bookRow.className = "row";
		container.appendChild(bookRow);
		var imgColumn = document.createElement('div');
		imgColumn.className = "large-4 columns";
		bookRow.appendChild(imgColumn);
		var imgBook = document.createElement('img');
		imgBook.className = "book-img";
		imgColumn.appendChild(imgBook);
		var bookColumn = document.createElement('div');
		bookColumn.className = "large-8 columns";
		bookRow.appendChild(bookColumn);
		var title = document.createElement('h3');
		title.innerText = item.title;
		bookColumn.appendChild(title);
		var author = document.createElement('p');
		author.innerText = item.author;
		bookColumn.appendChild(author);
		var rating = document.createElement('p');
		rating.innerText = item.rating;
		bookColumn.appendChild(rating);
		var input = document.createElement('input');
		input.type = "checkbox";
		input.className = "checked";
		bookColumn.appendChild(input);
		var wishBtn = document.createElement('button');
		wishBtn.innerText = "Add to wishlist";
		bookColumn.appendChild(wishBtn);
		var hr = document.createElement('hr');
		bookRow.appendChild(hr);
	});	
};
displayBooks(books);

But I think there is a simpler method to this.

I cannot use any libraries. This is a homework assignment, I can only use the functions and objects provided by JavaScript itself.

解决方案

I would do this by just appending raw HTML. It can be a bit ugly but it's cleaner than doing it element-by-element in this case.

var container = document.getElementById('container')

var books = [
    {title: 'Catch-22',
     author: 'Joseph Heller'
    },
    {title: 'The Road',
     author: 'Cormac McCarthy'
    }
];

function bookItem(item) {
    return "<h1>" + item.title + "</h1><p>" + item.author + "</p><br />"
}

books.forEach(function(book) {
    var new_div = document.createElement('div')
    new_div.innerHTML = bookItem(book)
    container.appendChild(new_div)
})

JSFiddle

这篇关于来自一系列对象的JavaScript中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！