Javascript CreateElement 创建空表答案

【问题标题】：Javascript CreateElement creates empty tablesJavascript CreateElement 创建空表
【发布时间】：2013-03-12 09:25:33
【问题描述】：

我正在尝试使用 pre html 标记来包含一些我将要格式化的代码。我从预先存在的 pre 标签中获取代码，并制作一个包含代码的表格，然后对其进行格式化。但是每隔一次我创建一个 td 元素，其中包含一些文本，就会创建一个空表。我的代码如下：

function init() {
    var pres = document.getElementsByTagName('pre');

    for (var i = 0; i < pres.length; i++) {
        var elem = pres[i];
        var ourTable = document.createElement('table');

        if (elem.className.toLowerCase() == 'code') {
            var lineCount = 1;
            var linesOfText = elem.innerHTML.split(/\r|\n/);

            for (var j = 0; j < linesOfText.length; j++) { 
                var ourRow = document.createElement('tr');
                var lineNumberTd = document.createElement('td');
                var lineNumberNode = document.createTextNode(lineCount);
                lineNumberTd.appendChild(lineNumberNode);

                ourRow.appendChild(lineNumberTd);

                var code = linesOfText[j];

                var codeTd = document.createElement('td');
                var ourPre = document.createElement('pre');
                ourPre.innerHTML = code;
                codeTd.appendChild(ourPre);
                ourRow.appendChild(codeTd);

                lineCount++;
                ourTable.appendChild(ourRow);
            }
        }

        elem.parentNode.replaceChild(ourTable, elem);
    }
}
window.onload = init;

我的 HTML 如下：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <link rel="stylesheet" href="DefaultStyle.css" />
    <title>Autoformatter</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <pre class="code">
                        while (!stop)
            {
                while (packetQueue.Count > 0)
                {
                    HandlePacket(packetQueue.Dequeue());
                }
            }
        </pre>
        </div>
    </form>
    <script type="text/javascript" src="PrimaryScript.js" ></script>
</body>
</html>

这会产生类似这样的东西：

在第 4、6 和 8 行的第 2 行也有空表。

【问题讨论】：

这是一个jsfiddle 与您的代码。
对我来说，一切如你所料......
@Simon - 哦，谢谢，这有点酷。

标签： javascript html html-table createelement pre

【解决方案1】：

问题是您使用的是 NodeList：

var pres = document.getElementsByTagName('pre');

for (var i = 0; i < pres.length; i++) {

NodeList 是“实时”集合，也就是说它们会发生变化。一开始你有一个前置标签，所以pres.length 返回1。但在循环中你添加前置标签。所以pres.length 也会发生变化。因此，您的循环会一次又一次地运行。

【讨论】：

【解决方案2】：

好的，所以我自己想出了问题的答案。

显然，在某种程度上，这条线

elem.parentNode.replaceChild(ourTable, elem);

运行的次数超出了应有的次数，因此它将新制作的前置元素替换为一个空表，因为新制作的前置元素没有设置 class='code' 属性。

将单行放入

if (elem.className.toLowerCase() == 'code') {

而不是在它之外，解决了我的问题。

【讨论】：