Question

我有一个对象数组-每个对象包含多个值。

由于我有新对象，所以将它们保存在数组中。但是，我想在我的DOM中发布此数组和新对象。这个想法是我的DOM列出了我数组中的所有对象，并且每次创建一个新对象时，它都会添加到我的数组中并在我的DOM中进行更新。

我很难理解如何在DOM中发布它。

我应该有2个循环吗？ -1将数据另存为对象，并在触发新对象时将其添加到我的数组中 -1在DOM中发布我的对象数组（但不是每次都重新生成整个表，而不是仅使用新对象“更新”吗？）

我在思考过程中遇到了麻烦，因此，如果您有建议，他们将非常受欢迎！

到目前为止，我有：

1-对象数组的声明

2-检索输入数据并将其分配给新对象的功能

3-将对象推入数组的功能

4-单击时，功能：调用函数创建对象调用函数将对象添加到表中将对象表转换为要在DOM中发布的字符串

我对精确创建循环的位置有些困惑。

非常感谢您的帮助！

Answer 1

根据您的描述，您正在尝试执行类似的操作。

// Declare array
const arr = [];

// Cache elements
const input = document.querySelector('input');
const button = document.querySelector('button');
const result = document.querySelector('#result');

// Assign event listener to the button
button.addEventListener('click', handleClick, false);

// When the button is clicked..
function handleClick() {

  // Push the new value/object to the array
  arr.push(input.value);

  // Call the function to update the page
  updatePage();
}

function updatePage() {

  // `map` over the data in the array to return an
  // array of HTML strings, and join them up
  const html = arr.map(el => `<p>${el}</p>`).join('');

  // Set the innerHTML of the result element as the
  // string `html`
  result.innerHTML = html;
}

p { color: blue; border: 1px solid red;}

<input />
<button>Add</button>
<div id="result"></div>

实际上，您只需要一个循环即可创建要添加到页面的HTML。

返回对象数组的DOM值

1 个答案: