Question

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

我想为每个对象创建一个div，其类名为 containerDiv;
我想循环通过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'
    }
]

Answer 1

您可以使用相同的document.cretateElement创建子元素。你还需要调用函数

＆＃13;

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

＆＃13;

<div id="parent"></div>

＆＃13;

Answer 2

您只需要在数组中的当前对象上循环。

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

样本：

＆＃13;

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];
    }
  }
}

＆＃13;

.container {
  border: 2px dashed #333;
  margin: 4px;
}

.container>p {
  margin: 10px;
  padding: 5px;
  background: #DDD;
}

＆＃13;

<div id=parent></div>

＆＃13;

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

＆＃13;

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

＆＃13;

.container {
  border: 2px dashed #333;
  margin: 4px;
}

.container>p {
  margin: 10px;
  padding: 5px;
  background: #DDD;
}

＆＃13;

<div id=parent></div>

＆＃13;

Answer 3

这是一种更通用和结构化的方法。重构变得更容易，它为每个特殊的＆＃34;创建和追加＆＃34;提供方法。任务。利用reduce作为列表迭代器方法具有保持更灵活的优点，例如什么样的＆＃34;容器＆＃34;通过为每个＆＃34;容器提供一种配置来进行选择。创造过程。

＆＃13;

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
});

＆＃13;

.surname:before {
  content: ' '
}

＆＃13;

<ul id="container-parent"></ul>

＆＃13;

JavaScript：将对象属性追加为子元素

3 个答案: