JavaScript不使用document.write动态生成页面元素的替代方法

document.write 存在阻塞页面渲染、页面加载完成后调用会覆盖整个文档等弊端，非常不建议在生产环境使用，以下提供两种更安全可靠的实现方式：

方案1：innerHTML拼接（易上手，适合新手） #

采用模板字符串拼接结构，一次性插入DOM，可读性和性能都优于多次调用document.write：

// 先获取要插入元素的父容器，这里以body为例，你也可以替换为自己指定的DOM节点
const parentContainer = document.body;
// 存储所有生成的HTML字符串
let htmlStr = '';
for (let i = 1; i <= 2; i++) {
  htmlStr += `
  <div class='menu'>
    <button id='btn${i}' value='${i * 10}'>
      <img class='screen_icon' src='./assets/img/screen.png'>
      <span class='screenSource'>None</span>
      <span class='screen_text'>Screen ${i}</span>
    </button>
  </div>
  `;
}
// 一次性插入到父容器末尾，减少DOM重绘次数
parentContainer.insertAdjacentHTML('beforeend', htmlStr);

方案2：原生DOM API创建（更安全，可规避XSS风险） #

如果渲染内容包含用户输入的动态内容，推荐用这种方法，不会执行恶意代码：

const parentContainer = document.body;
for (let i = 1; i <= 2; i++) {
  // 创建外层div.menu节点
  const menuDiv = document.createElement('div');
  menuDiv.className = 'menu';
  // 创建button节点
  const btn = document.createElement('button');
  btn.id = `btn${i}`;
  btn.value = i * 10;
  // 创建图标节点
  const iconImg = document.createElement('img');
  iconImg.className = 'screen_icon';
  iconImg.src = './assets/img/screen.png';
  // 创建来源文本span
  const sourceSpan = document.createElement('span');
  sourceSpan.className = 'screenSource';
  sourceSpan.textContent = 'None';
  // 创建屏幕名称span
  const textSpan = document.createElement('span');
  textSpan.className = 'screen_text';
  textSpan.textContent = `Screen ${i}`;
  // 按层级组装节点并插入父容器
  btn.append(iconImg, sourceSpan, textSpan);
  menuDiv.append(btn);
  parentContainer.append(menuDiv);
}

两种方案选型建议：

• 纯静态结构渲染、无用户输入动态内容的场景选方案1，代码更简洁
• 存在用户可编辑内容插入的场景优先选方案2，安全性更高

内容的提问来源于stack exchange，提问作者John Arne Holt