使用appendChild动态创建DOM元素的简化方法 优化冗长渲染代码

方案1：模板字符串拼接innerHTML（推荐，数据源可靠时优先用） #

这种方法是同类需求下最简洁的实现，同时减少了多次DOM操作带来的性能损耗：

async function getJobs() {
  const response = await fetch('https://app.beapplied.com/public/all-jobs');
  const data = await response.json();
  const jobContainer = document.getElementById("jobData");
  // 一次性拼接所有岗位HTML
  jobContainer.innerHTML = data.jobs.map(job => `
    <li class="whr-item">
      <a href="${job.applyLink}">
        <h3 class="whr-title">${job.title}</h3>
      </a>
      <ul class="whr-info">
        <li class="whr-dept">${job.team}</li>
        <li class="whr-location">${job.location}</li>
      </ul>
    </li>
  `).join('');
}
getJobs()

原有HTML代码不需要修改。

优化点说明 #

• 把容器DOM查询移到循环外，避免每次循环重复查询DOM
• 直接用模板字符串描述DOM结构，不需要逐个创建、配置、追加元素，代码可读性大幅提升
• 所有DOM内容一次性插入，减少页面重排重绘次数，性能更优

注意：如果接口返回的内容存在用户输入的不可信内容，需要先对job.title、job.team等字段做XSS转义再插入。

方案2：封装元素创建工具函数（适合需要防XSS、频繁操作DOM的场景） #

如果需要更安全的DOM生成逻辑，可以封装一个通用的元素创建工具，后续生成元素的逻辑都会简化很多：

// 通用元素创建工具
function el(tag, attrs = {}, children = []) {
  const element = document.createElement(tag);
  // 设置属性
  Object.entries(attrs).forEach(([key, value]) => element.setAttribute(key, value));
  // 追加子元素/文本
  children.forEach(child => {
    if (typeof child === 'string') {
      element.appendChild(document.createTextNode(child));
    } else {
      element.appendChild(child);
    }
  });
  return element;
}

async function getJobs() {
  const response = await fetch('https://app.beapplied.com/public/all-jobs');
  const data = await response.json();
  const jobContainer = document.getElementById("jobData");
  
  data.jobs.forEach(job => {
    const jobListing = el('li', {class: 'whr-item'}, [
      el('a', {href: job.applyLink}, [
        el('h3', {class: 'whr-title'}, [job.title])
      ]),
      el('ul', {class: 'whr-info'}, [
        el('li', {class: 'whr-dept'}, [job.team]),
        el('li', {class: 'whr-location'}, [job.location])
      ])
    ]);
    jobContainer.appendChild(jobListing);
  });
}
getJobs()

这个方案用文本节点插入内容，天然避免XSS风险，同时结构也比原生写法清晰很多。

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