在Javascript中使用innerHTML的数组项的无序列表答案

【问题标题】：an unordered list from Array items using innerHTML in Javascript在Javascript中使用innerHTML的数组项的无序列表
【发布时间】：2011-10-06 05:49:56
【问题描述】：

在用户在提示中输入“退出”后，我正在尝试向页面添加项目符号列表；该列表不应包含“退出”一词。我能够使用 document.write 获得完整的列表，但这包括“退出”并摆脱了我的页面格式。我很确定我需要使用innerHTML，但是当我这样做时，我得到的只是没有任何数组项的页面。非常感谢任何帮助。

<html>
<head>
    <img src="http://profperry.com/Classes20/JavaScript/lordoftherings.png" />
    <title>Javascript Test</title>
    <script>
    function askMe() {
        var fav_characterList = new Array();
        i = 0;
        var fav_character = "";

        while(fav_character != 'exit'){

            fav_character = prompt("Who's your favorite Lord of the Rings character\n\n Enter 'exit' to stop prompting", "");
            fav_characterList[i] = fav_character;

            i++;
        } 

        n = (fav_characterList.length);
        for(i = 0; i <= (n-1); i++){
            var list = fav_characterList[i];
            var MyList = getElementById('results');
            MyList.innerHTML = "<li>"+list+"</li>";


        }


    } 







    </script>

</head>
<body onload="askMe()">
    <ul>

        <div id="results">


        </div>
    </ul>


        <br/>
        <br/>

</body>

【问题讨论】：

标签： javascript arrays html-lists

【解决方案1】：

您必须使用 document.getElementById() 并在循环内生成一个字符串并在循环后使用内部 html，以免之前的 li 被覆盖。

更新代码部分，如

n = (fav_characterList.length);
    var kk="";

    for(i = 0; i <= (n-1); i++){
        var list = fav_characterList[i];
        kk += "<li>"+list+"</li>"


    }
var MyList = document.getElementById('results');        
MyList.innerHTML = kk;

在 html 中，删除 ul 中的 div 并将 id 给 ul

 <ul id="results">


        </ul>

下面是完整的代码：

<html>
<head>
<img src="http://profperry.com/Classes20/JavaScript/lordoftherings.png" />
<title>Javascript Test</title>
<script type="text/javascript">
    function askMe() 
{
    var fav_characterList = new Array();
    i = 0;
    var fav_character = "";

            while(fav_character != 'exit')
    {

            fav_character = prompt("Who's your favorite Lord of the Rings character\n\n Enter 'exit' to stop prompting", "");
            fav_characterList[i] = fav_character;
            i++;
            } 

    n = (fav_characterList.length);
    var kk="";

            for(i = 0; i <= (n-1); i++)
    {
            var list = fav_characterList[i];
            kk += "<li>"+list+"</li>"
    }

    var MyList = document.getElementById('results');
    MyList.innerHTML = kk;

    } 
    </script>

</head>
<body onload="askMe()">
    <ul id="results">
    </ul>
<br/>
<br/>
</body>
</html>

【讨论】：

【解决方案2】：

你应该使用MyList.innerHTML += "<li>"+list+"</li>";（注意使用+=而不是=）

另外，将您的<ul> HTML 更改为：

...

<ul id="results">
</ul>

...

【讨论】：