Вывод HTML-коллекций в виде списка JavaScript

Question

Я пытаюсь превратить содержимое элемента HTML в список, используя JavaScript.Я использую этот код, но он возвращает только последнюю опцию - «опцию 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

document.getElementById("NewOutput").innerHTML является собственностью вашего элемента.Если вы присвоите значение этому свойству, старое значение будет перезаписано.

Вы должны использовать

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

Таким образом, вы будете добавлять к innerHTML вместо того, чтобы перезаписывать его

PS a += b - это сокращение для a = a + b

Answer 2

Следующие критерии соответствуют вашим критериям:

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>

Answer 3

Вы заменяете innerHTML каждый раз.Как только вы нажмете последний, он просто заменит 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>