Question

我的常规javascript代码似乎是错误地或以错误的顺序输出到页面的东西，这很奇怪，因为代码非常简单（可能是20行顶部）。我的代码如下。注意：

pttr_data.length将返回150
clean_array.length将返回4.
output是一个div对象，即var output = document.getElementById（“results”）;

我希望我的代码输出如下：

<div>matcha matchb matchc matchn </div>

但它会返回：

<div/>matcha matchb matchc match

这是我的代码，我在其中放置随机字符以找出内容的位置（你会在div周围看到;;;, |||, [[[, }}}）：

var len = pttr_data.length;
for (var i = 0; i < len; i++) {
    var clean_array = pttr_data[i].match(RegExp(rexp.value, flags.value));
    output.innerHTML += ";;;<div>|||";
    var lengthy = clean_array.length;
    for (var j = 1; j < lengthy; j++) {
        if( clean_array[j] ) { output.innerHTML += clean_array[j] + ' '; }
        else { output.innerHTML += 'NULL '; }
    }
    out.innerHTML += "[[[</div>}}}\n";
}

此代码返回：

;;;<div>|||</div>matcha matchb matchc [[[}}}

有人可以解释为什么会这样吗？ javascript for循环是否独立运行（因此以不同的速度完成），即使它们是嵌套的？这没有任何意义，为什么有人会设计这样的脚本语言？
我的代码如何输出<div/>blah而不是<div>blah</div>？

由于

Answer 1

.innerHTML属性比您可以追加的字符串更复杂一些。如果您向其添加"<div>"（或示例中为";;;<div>|||"），则浏览器不会等待您是否最终提供结束</div>标记，它只会创建一个div立即。然后添加更多文字："matcha", "matchb", etc。最后你追加一个浏览器忽略的结束</div>，因为它再次没有等待它，但它保留了"[[[}}}"。

不要追加到.innerHTML，而是附加到字符串变量，然后在最后将.innerHTML设置为等于该字符串。

如果您要将clean_array的所有元素追加为空格，您甚至不需要for循环，则只需使用.join()：

output.innerHTML = "<div>" + clean_array.join(" ") + "</div>";
// or for all from index 1
output.innerHTML = "<div>" + clean_array.slice(1).join(" ") + "</div>";

但要保持嵌套for循环：

var len = pttr_data.length,
    outputStr = "";  // use a string variable

for (var i = 0; i < len; i++) {
    var clean_array = pttr_data[i].match(RegExp(rexp.value, flags.value));
    outputStr += ";;;<div>|||";
    var lengthy = clean_array.length;
    for (var j = 1; j < lengthy; j++) {
        // I think ternary conditional is neater than if/else
        outputStr += clean_array[j] ? clean_array[j] + ' ' : 'NULL ';
    }
    outputStr += "[[[</div>}}}\n";
}

output.innerHTML += outputStr;

Javascript输出缓冲区以错误的顺序放置东西

1 个答案: