javascript - 将 HTML 集合输出为列表 JavaScript
问题描述
我正在尝试使用 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>
解决方案
以下将符合您的标准:
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>
推荐阅读
- python - Flask WTFforms TypeError: object() 没有参数
- html - 页面加载后,Flex 间距似乎重置
- azure - 是否可以使用 Azure Powershell 在订阅级别/范围内创建和启用诊断设置?
- r - 无法将表面添加到 plot_ly
- python - 删除元组列表中的字符串元组
- django - 在 settings.CACHES 中配置“缓存”
- tableau-api - 如何快速定位哪些工作表/仪表板包含字段?
- c# - ASP.NET API 无法在 azure 上发布
- c - 使用桶排序时 C 中的分段错误(核心转储)
- json - 针对 XSLT 中的文字双引号测试节点