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

innerHTML adds text but not html tags

本文关键字：添加 html 标签 文本 innerHTML      更新时间：2023-09-26

首先抱歉这个初学者问题，但我最近刚学习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文件的)正文中的section标签。当我运行应用程序时，列表根本不显示。然而，当我只是尝试添加文本而不是列表时，如

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

显示文本。我试图插入html元素的方式可能有问题吗?

你不能像那样添加非法的HTML片段。没有</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(恰好与内容相同，因此您不会注意到示例代码中的差异)。由于这可能不是您想要的，因此您可能也想修复它。

永远不要将+=与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);
相关文章：