1

我有一个对象数组，我正在尝试为每个对象和每个对象的属性创建 HTML 元素，但是当我尝试遍历 containerDiv 并将对象的属性作为子元素附加时遇到了问题。

  • 我想为每个类名为 containerDiv 的对象创建一个 div；
  • 我想循环通过 containerDiv；
  • 我想为每个对象属性创建一个元素并将它们作为子元素附加到 containerDiv；

我的代码示例如下所示：

var parent = document.getElementById('parent');

function createHTMLElements() {
    for(var i = 0; i < arrayOfObjects.length; i++) {
        var containerDiv = document.createElement('div');
        containerDiv.className = 'container';
        parent.appendChild(containerDiv);

        // Loop through containerDiv and append object properties as child elements
    }
}

var arrayOfObjects = [
    {
        name: 'John',
        surname: 'Doe'
    },
    {
        name: 'David',
        surname: 'Mills'
    }
]
4

3 回答 3

0

您可以使用 same 创建子元素document.cretateElement。您还需要调用该函数

var arrayOfObjects = [{
    name: 'John',
    surname: 'Doe'
  },
  {
    name: 'David',
    surname: 'Mills'
  }
]
var parent = document.getElementById('parent');

function createHTMLElements() {
  for (var i = 0; i < arrayOfObjects.length; i++) {
    var containerDiv = document.createElement('div');
    containerDiv.className = 'container';
    var nameDiv = document.createElement('div');
    var surnameDiv = document.createElement('div');
    nameDiv .innerHTML = arrayOfObjects[i].name;
    surnameDiv .innerHTML = arrayOfObjects[i].surname;
    containerDiv.append(nameDiv );
    containerDiv.append(surnameDiv);
    parent.appendChild(containerDiv);

  }
}
createHTMLElements()
<div id="parent"></div>

于 2017-08-19T13:54:34.663 回答
0

您所需要的只是对数组中的当前对象进行循环。

for (var p in arrayOfObjects[i]) {
  containerDiv.appendChild(document.createElement("p"))
    .textContent = p + ": " + arrayOfObjects[i][p];
}

演示：

var parent = document.getElementById('parent');

var arrayOfObjects = [{
    name: 'John',
    surname: 'Doe'
  },
  {
    name: 'David',
    surname: 'Mills'
  }
];

createHTMLElements();

function createHTMLElements() {
  for (var i = 0; i < arrayOfObjects.length; i++) {
    var containerDiv = document.createElement('div');
    containerDiv.className = 'container';
    parent.appendChild(containerDiv);


    for (var p in arrayOfObjects[i]) {
      containerDiv.appendChild(document.createElement("p"))
        .textContent = p + ": " + arrayOfObjects[i][p];
    }
  }
}
.container {
  border: 2px dashed #333;
  margin: 4px;
}

.container>p {
  margin: 10px;
  padding: 5px;
  background: #DDD;
}
<div id=parent></div>

这是一个不使用循环但使用辅助函数来制作更简洁代码的演示。

var parent = document.getElementById('parent');

var arrayOfObjects = [{
    name: 'John',
    surname: 'Doe'
  },
  {
    name: 'David',
    surname: 'Mills'
  }
];

createHTMLElements();

function createHTMLElements() {
  for (var i = 0; i < arrayOfObjects.length; i++) {
    var containerDiv = create('div', {className: "container"}, parent);
    
    var obj = arrayOfObjects[i];
    create("p", {textContent: "name: " + obj.name}, containerDiv);
    create("p", {textContent: "surname: " + obj.surname}, containerDiv);
  }
}

function create(type, props, parent) {
  var el = document.createElement(type);
  for (var p in props) {
    el[p] = props[p];
  }
  if (parent) {
    parent.appendChild(el);
  }
  return el;
}
.container {
  border: 2px dashed #333;
  margin: 4px;
}

.container>p {
  margin: 10px;
  padding: 5px;
  background: #DDD;
}
<div id=parent></div>

于 2017-08-19T14:04:22.243 回答
0

这是一种更通用和结构化的方法。重构变得更加容易，因为它为每个特殊的“创建和附加”任务提供了方法。使用reduceas 列表迭代器方法具有保持更灵活的优点，例如通过为每个“容器”创建过程提供一种配置来选择哪种“容器”。 

var objectList = [{
  name: 'John',
  surname: 'Doe'
}, {
  name: 'David',
  surname: 'Mills'
}];

var elmContainer = document.createElement('li');
elmContainer.className = 'container';

function createAndAppendContainerChild(itemKey, itemValue, parentNode) {
  var elmChild = document.createElement('span');
  elmChild.className = itemKey;
  elmChild.appendChild(document.createTextNode(itemValue));
  parentNode.appendChild(elmChild);
}
function createAndAppendContainer(config, item) {
  var elmContainer = config.blueprintNode.cloneNode();
  Object.keys(item).forEach(function (key) {
    createAndAppendContainerChild(key, item[key], elmContainer);
  });
  config.parentNode.appendChild(elmContainer);
  return config;
}

objectList.reduce(createAndAppendContainer, {
  parentNode   : document.querySelector('#container-parent'),
  blueprintNode: elmContainer
});
.surname:before {
  content: ' '
}
<ul id="container-parent"></ul>

于 2017-08-19T15:36:21.357 回答