在DIV中配对数组元素

Question

我有从文本文件中读取并插入元素的脚本，以便可以对它们进行样式化和显示。但是，我现在想要在DIV内部配对两个元素。这里是代码：

var lines = request.responseText.replace(/\r/g, "").split("\n"); // Remove carriage returns (\r) and place text into an array, split at the newline character (\n) 
     for (var i = 0; i < lines.length; i++) { // Cycle through each line in the array 
      if (lines[i].length >= 57) { // Check if the current line is lengthy, and if so.....separate function 
      } 
      var coup = document.createElement("div"); // Create a div element 
      coup.id = "line" + i; // Give the div an ID in the form of line0, line1, etc. 
      coup.innerText = coup.textContent = lines[i]; // Place the current line of text in the div 
      el_status.appendChild(coup); // Append the div to the status box 
     } 

我想line0和line1进入一个DIV。然后，我想第2行和第3行进入另一个DIV ...

var coup不一定是一个div，我不介意将它改为p，span或li。

谢谢！

Answer 1

var lines = request.responseText.replace(/\r/g, "").split("\n"); 
for (var i = 1; i < lines.length; i += 2) { 
    var coup = document.createElement("div"); 
    coup.id = "line" + i; 
    coup.textContent = lines[i - 1] + lines[i]; 

    el_status.appendChild(coup); 
}​ 

只是每次迭代两个，都放置在同一个DIV，或一些变化，这取决于你以后在做什么结构？

Answer 2

尝试document.createTextNode();并在迭代的每一步添加两行的基本方法。

var lines = request.responseText.replace(/\r/g, "").split("\n"); // Remove carriage returns (\r) and place text into an array, split at the newline character (\n) 
     for (var i = 0, l = lines.length; i < l; i += 2) { // Cycle through each line in the array 
      if (lines[i].length >= 57) { // Check if the current line is lengthy, and if so.....separate function 
      } 
      var coup = document.createTextNode(lines[i-1] + lines[i]); // Create a div element 
      coup.id = "line" + i; // Give the div an ID in the form of line0, line1, etc. 
      coup.innerText = coup.textContent = lines[i]; // Place the current line of text in the div 
      el_status.appendChild(coup); // Append the div to the status box 
     } 

另外DOM操作相当昂贵，并且在for循环中添加可能会减慢速度。所以我宁愿这样做：

var lines = request.responseText.replace(/\r/g, "").split("\n"); // Remove carriage returns (\r) and place text into an array, split at the newline character (\n) 
var appendedLines = [];//create a new array. 
     for (var i = 0, l = lines.length; i < l; i += 2) { // Cycle through each line in the array 
      if (lines[i].length >= 57) { // Check if the current line is lengthy, and if so.....separate function 
      } 
      var coup = document.createTextNode(lines[i-1],lines[i]); // Create a div element 
      coup.id = "line" + i; // Give the div an ID in the form of line0 
      appendedLines.push(coup); // Append the div to the status box 
     } 
el_status.appendChild(appendedLines.join(''));// this uses a single append statement. 

此外，l = lines.length点是为了进一步加快速度。当您使用for循环的条件为i < someArray.length时，JS解释器将在迭代的每一步中查找someArray.length。存储对someArray.length修复程序的引用。