在Javascript中使用for循环将对象输入HTML div

我正在尝试使用for循环在对象材质上重复，并将该材质输入到html上的div中。现在我已经将代码设置为接受数组，但我想使用对象

var animals = [
  {
    name:'Aye Aye',
    description: 'blue',
    img: 'http://cdnimg.in/wp-content/uploads/2015/06/335.jpg?cfaea8',
    price:500
  }, {
    name:'Little Imp',
    description:'yellow',
    img:'http://cdnimg.in/wp-content/uploads/2015/06/334.jpg?cfaea8',
    price:3000
  }, {
    name:'Long Nose Monkey',
    decription:'grey',
    img:'http://cdnimg.in/wp-content/uploads/2015/06/492.jpg?cfaea8',
    price:5000
  }, {
    name:'Nicobar Bird',
    decription:'purple',
    img:'http://cdnimg.in/wp-content/uploads/2015/06/471.jpg?cfaea8',
    price: 6
  }, {
    name:'Slow Loris',
    decription: 'brown',
    img: 'https://s-media-cache-ak0.pinimg.com/736x/49/09/8f/49098fbc3c9a37fb03034b45e89c5cd4.jpg',
    price:90
  }, {
    name:'Tucan',
    decription:'orange',
    img: 'http://cdnimg.in/wp-content/uploads/2015/06/526.jpg?cfaea8',
    price:100
  }, {
    name:'Fennec Fox'
    decription:'yellow'
    img:'http://cdnimg.in/wp-content/uploads/2015/06/526.jpg?cfaea8',
    price:500
  }, {
    name:'Sugar Glider',
    description: 'green',
    img: 'https://pbs.twimg.com/media/CNd03WIUwAAqKHg.jpg:large',
    price:1000000
  }
]

function animal() {
  // var animalName = ['Aye Aye', 

  var animalElement = document.getElementById("div0");

  for (i=0; i<animalName.length; i++) {
    animalElement.innerHTML += '<h2>' + animalName[i]+'</h2>' +'<p>' + animalDescription[i] +'</p>' + '<p>' + animalPrice[i] +'</p>' + '<p>' + animalImage[i] + '</p>';
  };
};

animal();

var动物=[
{
姓名:"赞成",，
描述：'蓝色'，
img:'http://cdnimg.in/wp-content/uploads/2015/06/335.jpg?cfaea8',
价格：500
}, {
名字：'小淘气'，
说明：'黄色'，
img:'http://cdnimg.in/wp-content/uploads/2015/06/334.jpg?cfaea8',
价格：3000
}, {
名称：'长鼻猴'，
说明：“灰色”，
img:'http://cdnimg.in/wp-content/uploads/2015/06/492.jpg?cfaea8',
价格：5000
}, {
名称：“尼科巴鸟”，
说明：“紫色”，
img:'http://cdnimg.in/wp-content/uploads/2015/06/471.jpg?cfaea8',
价格:6
}, {
姓名：'Slow Loris'，
说明：“棕色”，
img:'https://s-media-cache-ak0.pinimg.com/736x/49/09/8f/49098fbc3c9a37fb03034b45e89c5cd4.jpg',
价格:90
}, {
名称：'Tucan'，
说明：“橙色”，
img:'http://cdnimg.in/wp-content/uploads/2015/06/526.jpg?cfaea8',
价格:100
}, {
姓名：'Fennec Fox'
说明：“黄色”
img:'http://cdnimg.in/wp-content/uploads/2015/06/526.jpg?cfaea8',
价格：500
}, {
名称：'糖滑翔机'，
描述：'绿色'，
img:'https://pbs.twimg.com/media/CNd03WIUwAAqKHg.jpg:large',
价格：100万
}
]
功能动物（）{
//var animalName=['Aye-Aye'，
var animalElement=document.getElementById（“div0”）；
对于（i=0；i这是一个基于您当前拥有的简单解决方案：

function generateAnimals() {
    var animalElements = document.getElementById("div0");
    var html = '';

    for (i = 0; i < animals.length; i++) {
        var animal = animals[i];

        html += '<h2>' + animal.name + '</h2>' 
            + '<p>' + animal.description + '</p>'
            + '<p>' + animal.price + '</p>'
            + '<p>' + animal.image + '</p>';
    }

    animalElements.innerHTML += html;
}

generateAnimals();

函数generateAnimals（）{
var animalElements=document.getElementById（“div0”）；
var html=''；
对于（i=0；i”
+“”+animal.price+”
”
+“”+animal.image+”
”；
}
animalElements.innerHTML+=html；
}
生成动物（）；

请注意，一旦事情变得更加复杂，创建这样的元素可能会变得混乱。
@Donavan在循环中调用innerHTML会导致多个dom重画。您可能希望将结果保存在var中，并在循环后执行.innerHTML，仅一次。您是对的。我只是展示了一个不需要太多代码更改的解决方案e、 但我认为将其更改为单个innerHTML调用是值得的。很好，现在就去更改它。您的代码将生成无效的HTML，甚至可能会根据数据的来源进行注入。不要将文本数据连接到HTML上下文中。我现在看到了输入错误，谢谢。我也不建议以这种方式创建HTML元素。我只是想帮助@Garrett Vangilder找出如何让他的函数与更新的数据结构一起工作。我不确定我告诉他“使用[insert framework]”是否会对他有很大帮助回答这个问题。@DonovanM您不需要使用框架来设置元素的文本。您的数据是一组类似的对象，这意味着数组是保存它的明显结构。您为什么要将其更改为对象？不清楚您要求的是什么或您在执行此操作时遇到了什么问题。请。