innerHTML 添加文本但不添加 html 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16073093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
innerHTML adds text but not html tags
提问by Tariq
First off sorry for this beginner question but I just recently learned JavaScript and I am now learning to develop Windows 8 apps. Here is the code in 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>';
I have this in the "ready" function (for any Windows 8 developers) in my JS file and 'numbersList' refers to a section tag in the body (of the HTML file). The list does not show up at all when I am running the app. However when I simply try to add text instead of a list like so
我在我的 JS 文件的“就绪”函数（适用于任何 Windows 8 开发人员）中有这个，“numbersList”是指（HTML 文件的）正文中的一个部分标签。当我运行该应用程序时，该列表根本不显示。但是，当我只是尝试添加文本而不是像这样的列表时
id('numberList').innerHTML = 'hello';
the text does show up. Could there be a problem with the way I am trying to insert the html elements?
文本确实出现了。我尝试插入 html 元素的方式有问题吗？
回答by jfriend00
You can't add pieces of illegal HTML like that. A <ul>tag with no </ul>is illegal. Build the entire HTML string in a string variable and then add one piece of legal HTML or build individual DOM elements, put the content in them and add them to the DOM.
你不能像那样添加非法的 HTML 片段。<ul>没有的标签</ul>是非法的。在字符串变量中构建整个 HTML 字符串，然后添加一段合法的 HTML 或构建单个 DOM 元素，将内容放入其中并将它们添加到 DOM。
Further, you don't iterate an array with for (var x in numbers)as that iterates properties of an object, not just array elements and, while it will work in some circumstances, is generally a bad practice that you should not use.
此外，您不要迭代数组，for (var x in numbers)因为它迭代对象的属性，而不仅仅是数组元素，虽然它在某些情况下可以工作，但通常是一种不应该使用的不好的做法。
You can fix those errors and build up a single HTML string and then add it once at the end like this:
您可以修复这些错误并构建一个 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;
For completeness, you could also build individual DOM elements:
为了完整起见，您还可以构建单独的 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);
You may also want to note that the code you original wrote was not retrieving the array elements numbers[x], but was using the array indexes x(which happen to be the same as the content so you wouldn't notice a difference in your sample code). Since that's probably not what you intended, you probably want to fix that too.
您可能还需要注意，您最初编写的代码不是检索数组元素numbers[x]，而是使用数组索引x（恰好与内容相同，因此您不会注意到示例代码中的差异）。由于这可能不是您想要的，您可能也想解决这个问题。
回答by Niet the Dark Absol
You should never use +=with innerHTML. Instead, build the string and then put it in all at once, otherwise the engine will try to correct your incomplete HTML.
你永远不应该使用+=with 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;
With that being said, a "better" way to do it would be as follows:
话虽如此，“更好”的方法如下：
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);
