Question

我正在尝试创建动态列表，并尝试在页面加载时加载它。我已经编写了脚本并对其进行了测试，但由于某些原因它似乎没有起作用。

CODE

org.sonar.java.checks.helpers.ExpressionHelper

小提琴 https://jsfiddle.net/88vo6vb8/

Answer 1

您需要使用window.onload事件并将元素创建代码内部移动到循环中，如下所示。并使用element.innerHTML为每个li元素设置文本。

<script>
var fruits = ["apple","pear","banana","orange"];

window.onload = () => {
  for(let i=0;i<fruits.length;i++){
    list = document.createElement("LI");
    list.setAttribute("href","#");
    list.innerHTML = fruits[i];
    document.getElementById('list-container').appendChild(list);
  }


}

</script>

<ul id="list-container">
  
  
</ul>

Answer 2

Here is the fiddle 和下面的代码片段。根据@Shalitha Suranga的回答，我做了一个小小的补充。

<script>
var fruits = ["apple","pear","banana","orange"];

window.onload = () => {
  for(let i=0;i<fruits.length;i++){
  	liA=document.createElement("a");
    liA.setAttribute("href","#");
    list = document.createElement("LI");
    list.innerHTML = fruits[i];
    liA.appendChild(list);
    document.getElementById('list-container').appendChild(liA);
  }


}

</script>

<ul id="list-container">
  
  
</ul>

在页面加载时加载动态创建的列表

2 个答案: