不使用jQuery，如何逻辑精简优化这段原生JavaScript DOM操作代码？

方案1：抽离复用逻辑+配置化遍历（安全无XSS风险） #

该方案通过抽离公共的DOM创建逻辑合并重复代码，后续新增记录只需要修改配置数组即可，维护成本更低，且完全规避XSS注入风险。

// 抽离公共的元素创建工具函数
function createEl(tag, attrs = {}, children = []) {
  const el = document.createElement(tag);
  // 批量设置属性
  Object.entries(attrs).forEach(([key, val]) => {
    if (key === 'style') el.style.cssText = val;
    else if (key === 'text') el.textContent = val;
    else el.setAttribute(key, val);
  });
  // 批量追加子元素
  children.forEach(child => el.appendChild(child));
  return el;
}

// 要渲染的记录配置，后续新增直接加项即可
const recordList = [
  { label: 'A Record', value: xhttp.responseText },
  { label: 'WWW Record', value: xhttp.responseText },
  { label: 'FTP Record', value: xhttp.responseText }
];

// 批量生成子元素
const children = [];
recordList.forEach(item => {
  children.push(
    createEl('span', { style: 'font-weight:bold', text: item.label }),
    createEl('br'),
    createEl('span', { text: item.value }),
    createEl('br')
  );
});

// 创建主容器并插入到目标节点
const mainDiv = createEl('div', { style: 'margin:15px' }, children);
ticketForm.appendChild(mainDiv);

方案2：innerHTML简写（仅适合内容完全可控场景） #

如果所有展示内容均为自身可控、不存在用户输入的场景，可以直接拼接HTML字符串一次性插入，代码更简洁：

// 注意：如果value包含用户输入内容，禁止使用该方案，存在XSS注入风险
ticketForm.innerHTML += `
<div style="margin:15px">
  ${['A Record', 'WWW Record', 'FTP Record'].map(label => `
    <span style="font-weight:bold">${label}</span><br>
    <span>${xhttp.responseText}</span><br>
  `).join('')}
</div>
`;

内容的提问来源于stack exchange，提问作者aliveli50