将HTML集合输出为列表JavaScript

问题描述 投票:0回答:3

我正在尝试使用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>
javascript arrays sorting innerhtml htmlcollection
3个回答
0
投票

document.getElementById("NewOutput").innerHTML是您元素的属性。如果为此属性指定值,则旧值将被覆盖。

你应该用

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

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

附: a += ba = a + b的捷径


0
投票

您每次都在替换innerHTML。一旦你击中了最后一个,它就会将innerHTML替换为最后一个elem的值。

更新您要使用的代码:

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>

0
投票

以下将符合您的标准:

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>
© www.soinside.com 2019 - 2024. All rights reserved.