Как я могу переделать этот код, чтобы создать таблицу, но с использованием циклов?

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 является вложенной структурой, циклы (которые являются «плоскими») не являются правильным выбором. Вложенные функции работают лучше всего.

Answer 2

Или рекурсивный цикл

const table = {
  tag: "table",
  children: [
    {
      tag: "tr",
      children: [
        {
          tag: "td",
          children: [
            {
              text: "A1"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "A2"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "A3"
            }
          ]
        }
      ]
    },
    {
      tag: "tr",
      children: [
        {
          tag: "td",
          children: [
            {
              text: "B1"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "B2"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "B3"
            }
          ]
        }
      ]
    },
    {
      tag: "tr",
      children: [
        {
          tag: "td",
          children: [
            {
              text: "C1"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "C2"
            }
          ]
        },
        {
          tag: "td",
          children: [
            {
              text: "C3"
            }
          ]
        }
      ]
    }
  ]
};

function render(root, data) {
  const recurse = (parent, d) => {
    let current;
    if (d.tag) {
      current = parent.appendChild(document.createElement(d.tag));
    } else if (d.text) {
      current = parent.appendChild(document.createTextNode(d.text));
    }
    if (d.children && d.children.length) {
      d.children.forEach(child => recurse(current, child));
    }
  };
  recurse(root, data);
}

render(document.body, table);