innerHTML只添加文本而不添加HTML标签

Question

首先，对于这个初学者问题表示抱歉，但我最近刚学会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元素的方式有问题吗？

- Tariq

---

除了已有的答案之外，不要使用 for..in 循环遍历数组，而应该使用常规的 for(;;) 循环。如果数组原型被更改（无论是你自己还是第三方），这可能会导致错误。 - bfavaretto

现在才看到这个。谢谢bfavaretto。我会记住的。 - Tariq

Answer 1

您不能添加非法HTML标记。没有结束标记的

标签是非法的。请在字符串变量中构建整个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（这恰好与内容相同，因此在示例代码中你可能不会注意到差异）。由于这可能不是你想要的，你可能也需要修复它。

- jfriend00

---

你打算自己为HTML转义所有的变量文本数据吗？为什么要这样做？创建元素并设置它们的文本可以确保这不是一个问题，也是正确的方法。特别是对于可能来自外部的数据...你不想让自己暴露于XSS攻击！ - Brad

@Brad，这里的变量 data 只是一个已知数字。没有任何问题。如果您愿意，可以自由提供一个逐个创建元素的答案。 - jfriend00

“@Brad - 最好的取决于情况。在许多情况下使用 innerHTML 没有问题。实际上，当有很多元素时，它通常更快。我不想再跟你争论这个问题了。我的答案简单易行。” - jfriend00

在使用 innerHTML 方面并没有什么问题。这不是我想告诉你的。问题在于在 HTML 上下文中使用任意文本数据。绝对取决于情况，而你和我都不知道具体情况，这就是为什么我首先在评论中提到它，因为你在回答中未包含此信息。 - Brad

我的答案现在包含了HTML字符串构建和DOM元素创建两种选项。 - jfriend00

Answer 2

不应该在innerHTML中使用+=。相反，先构建字符串，然后一次性放入，否则引擎会尝试纠正您的不完整HTML。

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

话虽如此，更好的方法是按照以下方式进行：

var numbers = [1,2,3,4,5], ul = document.createElement('ul');
for( var x in numbers) ul.appendChild(document.createElement('li')).appendChild(document.createTextNode(x));
var nl = id("numberList");
while(nl.firstChild) nl.removeChild(nl.firstChild);
nl.appendChild(ul);

- Niet the Dark Absol

---

你能修复数组迭代部分吗？ - bfavaretto

谢谢你的帮助！两个答案都很好，但感谢你包含示例代码。如果你能解释一下第二种“更好的方法”，那就太棒了。 - Tariq