Question

我有一个对象，想要使用JS迭代添加到HTML。我想在每个对象的右侧添加一个按钮。

说，我的对象看起来像{"one": "One", "two": "Two", "three": "Three"}

最终结果应如下所示：

- One [Click Me]
- Two [Click Me]
- Three [Click Me]
- etc...

HTML：

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

JS：

const container = document.getElementById("container")
const obj = {"one": "One", "two": "Two", "three": "Three"}

for(let key in obj) {
  const listItem = document.createElement("li")
  const listButton = document.createElement("button")

  listButton.textContent = "Click me!"
  listItem.textContent = obj[key]

  // Unsure how to add the button
  // Tried:
  //
  // const tempButton = document.createElement('button');
  // tempButton.style.backgroundColor = "red"
  // listItem.insertAdjacentElement('afterend', tempButton)
  //
  // also tried:
  //
  // listItem.insertAdjacentElement('afterend', '<div>Hello</div>')
  container.appendChild(listItem)
}

我看到"One" "Two" "Three"符合预期，但是没有按钮。如何在迭代旁边添加/插入/添加其他元素？有没有比我现在建议的更有效的方法？

Answer 1

只需将button作为子元素附加到li元素。

const container = document.getElementById("container")
const obj = {"one": "One", "two": "Two", "three": "Three"}

for(let key in obj) {
  const listItem = document.createElement("li");
  const listButton = document.createElement("button");

  listButton.textContent = "Click me!"
  listButton.style.margin = '10px';
  listItem.textContent = obj[key];
  listItem.appendChild(listButton);

  container.appendChild(listItem);
}

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

在用Java迭代添加元素的同时添加第二个元素？

1 个答案: