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

时间:2013-04-18 01:36:14

标签: javascript html5 windows-8 innerhtml

首先抱歉这个初学者问题,但我刚刚学习了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元素的方式可能有问题吗?

2 个答案:

答案 0 :(得分:5)

你不能像这样添加非法HTML片段。没有<ul>的{​​{1}}代码是非法的。在字符串变量中构建整个HTML字符串,然后添加一段合法的HTML或构建单独的DOM元素,将内容放入其中并将它们添加到DOM中。

此外,您不会使用</ul>迭代数组,因为它会迭代对象的属性,而不仅仅是数组元素,虽然它在某些情况下会起作用,但通常是一种不应该使用的错误做法

您可以修复这些错误并构建一个HTML字符串,然后在最后添加一次,如下所示:

for (var x in numbers)

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

    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;

您可能还需要注意,您原始编写的代码不是检索数组元素 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](恰好与内容相同,因此您不会注意到您的示例代码的差异)。由于这可能不是你想要的,你可能也想解决这个问题。

答案 1 :(得分:5)

永远不要将+=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);