我正在尝试使用 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>
document.getElementById("NewOutput").innerHTML
是元素的属性。如果您为此属性分配一个值,则旧值将被覆盖。
你应该使用
document.getElementById("NewOutput").innerHTML += "<li>" +
//---------------------------------------------^
getOptions[i].innerHTML + "</li>";
}
因此,您将添加到innerHTML
而不是覆盖它
PSa += b
是快捷方式a = a + b
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句