Question

我是JavaScript新手。

我有一个包含一些值的数组，我想在列表中显示每个数组值。

这是我的脚本

<script>
var fruits = "apple,banana,watermelon,coconut";
var plits = fruits.split(',');
function a(){
  for(i=0; i<plits.length; i++){
    document.getElementById('output').innerHTML = "<li>" + plits[i] + " fruit</li>";
    //document.write("<li>" + plits[i] + " fruit</li>");
  }
}
</script>

<button onclick="a()">show fruits</button>
<div id='output'></div>

每当我运行代码时，它只显示数组的最新值。

同样，当我使用上面的注释脚本时，页面会发生变化，并且会变为无限加载。

如何在#output中显示数组值？

Answer 1

最好使用document.createElement和Node.appendChild。

function a() {
    var ul = document.createElement('ul'),
        li, i;

    for (i = 0; i < plits.length; i++) {
        li = document.createElement('li');
        li.innerHTML = plits[i];
        ul.appendChild(li);
    }
    document.getElementById('output').appendChild(ul);
    a = function () {};
}

var fruits = "apple,banana,watermelon,coconut",
    plits = fruits.split(',');

<button onclick="a()">show fruits</button>
<div id='output'></div>

Answer 2

替换

document.getElementById('output').innerHTML = "<li>" + plits[i] + " fruit</li>";

与

document.getElementById('output').innerHTML += "<li>" + plits[i] + " fruit</li>";

完成功能

function a(){
  var html = "<ul>";
  for(i=0; i<plits.length; i++)
  {
    html += "<li>" + plits[i] + " fruit</li>";
  }
  html += "</ul>";
  document.getElementById('output').innerHTML = html;
}

为确保a()不再可调用，请将其设置为null

function a(){
  var html = "<ul>";
  for(i=0; i<plits.length; i++)
  {
    html += "<li>" + plits[i] + " fruit</li>";
  }
  html += "</ul>";
  document.getElementById('output').innerHTML = html;
  a = null;// or a = function(){}
}

Answer 3

你正在做的是替换for循环中div的innerHTML。但你真正需要做的是在每次迭代中追加字符串。

<script>
var fruits = "apple,banana,watermelon,coconut";
var plits = fruits.split(',');
function a(){
  var message = "<ul>";
  for(i=0; i<plits.length; i++){
     message += '<li>'+plits[i] + " fruit</li>";
  }
  message += '</ul>'
  document.getElementById('output').innerHTML = message;
}
</script>

<button onclick="a()">show fruits</button>
<div id='output'></div>

Answer 4

            <!DOCTYPE html>
            <html>
            <head>
                <title></title>
            </head>
            <body>
            <script>
            var fruits = "apple,banana,watermelon,coconut";
            var plits = fruits.split(',');
            var content = '';
            function a(){
              for(i=0; i<plits.length; i++){
                content = content.concat("<li>" + plits[i] + " fruit</li>");  
              }
              document.getElementById('output').innerHTML = content;
            }
            </script>

            <button onclick="a()">show fruits</button>
            <div id='output'></div>
            </body>
            </html>

Answer 5

看看这个小提琴：

https://jsfiddle.net/0my1xx7c/

<button id='button'>show fruits</button>
<ul id='output'></ul>


<script>
var fruits = "apple,banana,watermelon,coconut";
var plits = fruits.split(',');
function a(){
  for(i=0; i<plits.length; i++){
    var li = document.createElement('li');
    li.textContent = plits[i] + ' ' + 'fruit';
    document.getElementById('output').appendChild(li);
  }
}

document.getElementById('button').addEventListener('click', a, false);
</script>

说明：

不要将li项附加到div，而是附加ul或ol元素
不是编写，而是在元素中添加一个id，并在单击按钮后附加一个执行该函数的事件监听器
创建和追加元素，而不是使用innerHTML

显示javascript数组值

这是我的脚本

5 个答案: