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

Question

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

我想为每个名称为 class 的对象创建一个 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 创建子元素。你还需要调用函数

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>

Answer 2

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

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>

Answer 3

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

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>

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

JavaScript: Append object properties as child elements

javascript

arrays

for-loop

object-properties

createelement