javascript - 如何使用数组在 li 中插入文本？

Question

我正在创建一个包含许多列表的网站，并且我的结构如下:

<ul class="list-container">
  <li>TEXT
  <li>TEXT
  <li>TEXT
</ul>

我可以创建一个像 var a = [1,2,3,4] 这样的数组，并且 li 变为:

<ul>
  <li>1
  <li>2
  <li>3
  <li>4
</ul>

我尝试过:

var a = [
  "Testo 1",
  "Testo 2",
  "Testo 3",
  "Testo 4"
];

for (var i = 0; i < document.querySelector("li").length; i++) {
  document.querySelector("li")[i].innerHTML = a[i];
}

<ul>
  <li>
  <li>
  <li>
</ul>

这不起作用，有人可以帮助我吗？

Answer 1

querySelector() 方法仅返回与指定选择器匹配的第一个元素。要返回所有匹配项，请改用 querySelectorAll() 方法。

var a = [
  "Testo 1",
  "Testo 2",
  "Testo 3",
  "Testo 4"
];
for (var i = 0; i < document.querySelectorAll("li").length; i++) {
  document.querySelectorAll("li")[i].innerHTML = a[i];
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li>
  <li>
  <li>
</ul>