我如何重做此代码以创建表，但使用循环？

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

从innerHTML到成熟的模板，共有100种方法。这是最简单的选项之一：

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')),
    )
))