javascript - 我怎样才能重做这段代码来创建表，但使用循环？

Question

我正在仅使用 javascript 和 DOM 属性创建一个表，有没有一种方法可以更改我的代码以使用循环来做同样的事情，因为正如您在代码中看到的那样，这实际上是同一件事 3次，只是添加了不同的元素？

// Body element
var docNavigate = document.body; 

docNavigate.appendChild(tableElem);     // Adds the table element

docNavigate = docNavigate.lastChild;    // Moves to the table element
docNavigate.appendChild(trElem1);       // Adds the tr element
docNavigate = docNavigate.firstChild;   // Moves the tr element
docNavigate.appendChild(tdElem1);       // Adds the first td element in the heading
docNavigate.appendChild(tdElem2);       // Adds the second td element in the heading
docNavigate.appendChild(tdElem3);       // Adds the third td element in the heading
docNavigate = docNavigate.firstChild;   // Moves to the first td element
docNavigate.appendChild(textNodeA1);    // Adds the first textNode
docNavigate = docNavigate.nextSibling;  // Moves to the next td element
docNavigate.appendChild(textNodeA2);    // Adds the second textNode
docNavigate = docNavigate.nextSibling;  // Moves to the next td element
docNavigate.appendChild(textNodeA3);    // Adds the third textNode
docNavigate = docNavigate.parentNode;   // Moves back to the tr element
docNavigate = docNavigate.parentNode;   // Moves back to the table element

docNavigate.appendChild(trElem2);       // Adds the second tr element
docNavigate = docNavigate.lastChild;    // Moves to the second tr element
docNavigate.appendChild(tdElem4);       // Adds the td element
docNavigate.appendChild(tdElem5);       // Adds the td element
docNavigate.appendChild(tdElem6);       // Adds the td element
docNavigate = docNavigate.firstChild;   // Moves to the first td element
docNavigate.appendChild(textNodeB1);    // Adds the frist textNode
docNavigate = docNavigate.nextSibling;  // Moves to te next td element
docNavigate.appendChild(textNodeB2);    // Adds the second textNode
docNavigate = docNavigate.nextSibling;  // Moves to the next td element
docNavigate.appendChild(textNodeB3);    // Adds the thrid textNode
docNavigate.parentNode;                 // Moves to the tr element
docNavigate.parentNode;                 // Moves to the table element

docNavigate.appendChild(trElem3);       // Adds the tr element
docNavigate = docNavigate.lastChild;    // Moves to the tr element
docNavigate.appendChild(tdElem7);       // Adds the td element
docNavigate.appendChild(tdElem8);       // Adds the td element
docNavigate.appendChild(tdElem9);       // Adds the td element
docNavigate = docNavigate.firstChild;   // Moves to the first td element
docNavigate.appendChild(textNodeC1);    // Adds the first textNode
docNavigate = docNavigate.nextSibling;  // Moves to the td element
docNavigate.appendChild(textNodeC2);    // Adds the second textNode
docNavigate = docNavigate.nextSibling;  // Moves to the next td element
docNavigate.appendChild(textNodeC3);    // Adds the third textNode
docNavigate.parentNode;                 // Moves to the tr element
docNavigate.parentNode;                 // Moves to the table element

Answer 1

有 100 多种方法可以做到这一点，从 innerHTML 到成熟的模板。这是最简单的选项之一:

function tag(name, ...children) {
    let t = document.createElement(name);
    for (let c of children)
        t.appendChild(c);
    return t;
}

function text(content) {
    return document.createTextNode(content);
}

//

document.body.appendChild(tag('table',
    tag('tr',
        tag('td', text('cell 1')),
        tag('td', text('cell 2')),
        tag('td', text('cell 3')),
    ),
    tag('tr',
        tag('td', text('cell 4')),
        tag('td', text('cell 5')),
        tag('td', text('cell 6')),
    )
))

一般来说，由于 HTML 是嵌套结构，循环(“扁平”)不是正确的选择。嵌套函数效果最好。