将 HTML 个集合输出为列表 JavaScript
Output HTML collections as a list JavaScript
我正在尝试使用 JavaScript 将 HTML 元素内容转换为列表。我正在使用这段代码,但它只返回最后一个选项 - "option 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>
您每次都在替换 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>
document.getElementById("NewOutput").innerHTML
是您元素的 属性。如果您为此 属性 赋值,旧值将被覆盖。
你应该使用
document.getElementById("NewOutput").innerHTML += "<li>" +
//---------------------------------------------^
getOptions[i].innerHTML + "</li>";
}
因此您将添加到 innerHTML
而不是覆盖它
P.S。 a += b
是 a = a + b
的快捷方式
以下符合您的条件:
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>
我正在尝试使用 JavaScript 将 HTML 元素内容转换为列表。我正在使用这段代码,但它只返回最后一个选项 - "option 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>
您每次都在替换 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>
document.getElementById("NewOutput").innerHTML
是您元素的 属性。如果您为此 属性 赋值,旧值将被覆盖。
你应该使用
document.getElementById("NewOutput").innerHTML += "<li>" +
//---------------------------------------------^
getOptions[i].innerHTML + "</li>";
}
因此您将添加到 innerHTML
而不是覆盖它
P.S。 a += b
是 a = a + b
以下符合您的条件:
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>