innerHTML 添加文本但不添加 html 标签

首先，我对这个初学者问题感到抱歉，但我最近刚刚学习 JavaScript，现在正在学习开发 Windows 8 应用程序。这是有问题的代码：

        var numbers = [1, 2, 3, 4, 5];
        id('numberList').innerHTML = '<ul>';
        for (var x in numbers) {
            id('numberList').innerHTML += '<li>' + x + '</li>';
        }
        id('numberList').innerHTML = '</ul>';

我在 JS 文件的“ready”函数（对于任何 Windows 8 开发人员）中有这个，“numbersList”指的是（HTML 文件）正文中的节标记。当我运行应用程序时，该列表根本不显示。但是，当我只是尝试添加文本而不是像这样的列表时

       id('numberList').innerHTML = 'hello';

文字确实出现了。我尝试插入 html 元素的方式是否有问题？

您不能添加这样的非法 HTML 片段。 A<ul>标签没有</ul>是非法的。在字符串变量中构建整个 HTML 字符串，然后添加一段合法的 HTML 或构建单独的 DOM 元素，将内容放入其中并将它们添加到 DOM。

此外，您不会使用以下方式迭代数组for (var x in numbers)因为它会迭代对象的属性，而不仅仅是数组元素，虽然它在某些情况下可以工作，但通常是一种不好的做法，您不应该使用。

您可以修复这些错误并构建单个 HTML 字符串，然后在末尾添加一次，如下所示：

    var numbers = [1, 2, 3, 4, 5];
    var str = '<ul>';
    for (var x = 0; x < numbers.length; x++) {
        str += '<li>' + numbers[x] + '</li>';
    }
    str += '</ul>';
    id('numberList').innerHTML = str;

为了完整起见，您还可以构建单独的 DOM 元素：

    var numbers = [1, 2, 3, 4, 5];
    var ul = document.createElement("ul"), li, tx;
    for (var x = 0; x < numbers.length; x++) {
        li = document.createElement("li");
        tx = document.createTextNode(numbers[x]);
        li.appendChild(tx);
        ul.appendChild(li);
    }
    var parent = id('numberList');
    parent.innerHTML = "";
    parent.appendChild(ul);

您可能还想注意，您最初编写的代码没有检索数组元素numbers[x]，但是正在使用数组索引x（这恰好与内容相同，因此您不会注意到示例代码中的差异）。由于这可能不是您想要的，因此您可能也想解决这个问题。