Question

我正在尝试使用JavaScript将HTML元素内容转换为列表。我正在使用此代码，但它仅返回最后一个选项-“选项6”，而不是逐行逐行显示每个选项。

有人可以告诉我我想念的东西吗？

  var getOptions = document.getElementsByClassName("aofi");
var i;

for (i = 0; i < getOptions.length; i++) {

  document.getElementById("NewOutput").innerHTML = "<li>" + getOptions[i].innerHTML + "</li>";
}

<div class="allOptions">
  <h2 class="aofi">option 1</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 2</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 3</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 4</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 5</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 6</h2>
</div>

<div id="NewOutput"></div>

Answer 1

您每次都替换innerHTML。一旦找到最后一个元素，它将用最后一个elem的值替换innerHTML。

更新您的代码以使用：

document.getElementById("NewOutput").innerHTML +=

+ =是重要的部分，因为它说的是添加到已经存在的部分上。

  var getOptions = document.getElementsByClassName("aofi");
var i;

for (i = 0; i < getOptions.length; i++) {
  document.getElementById("NewOutput").innerHTML += "<li>" + getOptions[i].innerHTML + "</li>";
}

<div class="allOptions">
  <h2 class="aofi">option 1</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 2</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 3</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 4</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 5</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 6</h2>
</div>

<div id="NewOutput"></div>

Answer 2

document.getElementById("NewOutput").innerHTML是您元素的属性。如果您为此属性分配一个值，则旧值将被覆盖。

您应该使用

document.getElementById("NewOutput").innerHTML += "<li>" + 
//---------------------------------------------^
  getOptions[i].innerHTML + "</li>";
}

因此，您将添加到innerHTML而不是覆盖它

P.S。 a += b是a = a + b

的快捷方式

Answer 3

以下内容符合您的条件：

const h2s = document.querySelectorAll("h2"),
      output = document.querySelector("#NewOutput")

h2s.forEach(h2 => output.innerHTML += `<li>${h2.innerText}</li>`)

<div class="allOptions">
  <h2 class="aofi">option 1</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 2</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 3</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 4</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 5</h2>
</div>
<div class="allOptions">
  <h2 class="aofi">option 6</h2>
</div>

<div id="NewOutput"></div>

将HTML集合输出为列表JavaScript

3 个答案: