如何从Promise获取数据并将JSON响应追加至HTML页面body？

针对你的需求，这里有几种简洁且符合现代前端实践的方法，能把JSON响应数据优雅地追加到页面body中：

方法1：模板字符串 + innerHTML（最直观快速） #

这种方式适合结构简单的内容，代码量少易读：

fetch('https://www.url.com/getdata/showid?userId=433642', { method: 'get' })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // 用模板字符串构建HTML结构
    const content = `
      <div class="data-container">
        <p>ID: ${data.id}</p>
        <p>格式化ID: ${data.formattedId}</p>
      </div>
    `;
    // 追加到body末尾
    document.body.innerHTML += content;
  })
  .catch(err => {
    console.error('获取数据失败:', err);
    // 可选：在页面上显示错误提示
    document.body.innerHTML += `<p class="error">数据加载失败，请稍后重试</p>`;
  });

方法2：DOM元素创建（更安全、性能更好） #

如果需要避免innerHTML的潜在XSS风险（即使你的接口数据可信，这也是良好实践），或者后续要给元素绑定事件，推荐用原生DOM方法创建元素：

fetch('https://www.url.com/getdata/showid?userId=433642', { method: 'get' })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // 创建容器div
    const container = document.createElement('div');
    container.className = 'data-container';

    // 创建ID文本节点
    const idPara = document.createElement('p');
    idPara.textContent = `ID: ${data.id}`;
    container.appendChild(idPara);

    // 创建格式化ID文本节点
    const formattedIdPara = document.createElement('p');
    formattedIdPara.textContent = `格式化ID: ${data.formattedId}`;
    container.appendChild(formattedIdPara);

    // 追加到body
    document.body.appendChild(container);
  })
  .catch(err => {
    console.error('获取数据失败:', err);
    const errorPara = document.createElement('p');
    errorPara.className = 'error';
    errorPara.textContent = '数据加载失败，请稍后重试';
    document.body.appendChild(errorPara);
  });

方法3：insertAdjacentHTML（灵活性更高） #

这种方法可以精准控制插入位置（比如beforeend就是追加到元素末尾），同时兼顾模板字符串的便捷性：

fetch('https://www.url.com/getdata/showid?userId=433642', { method: 'get' })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    const content = `
      <div class="data-container">
        <p>ID: ${data.id}</p>
        <p>格式化ID: ${data.formattedId}</p>
      </div>
    `;
    // 插入到body的末尾位置
    document.body.insertAdjacentHTML('beforeend', content);
  })
  .catch(err => {
    console.error('获取数据失败:', err);
    document.body.insertAdjacentHTML('beforeend', `<p class="error">数据加载失败，请稍后重试</p>`);
  });

选择建议： #

• 如果你只是快速展示简单文本，方法1或3足够用；
• 如果你需要对元素做更多交互处理，或者追求更高的安全性，方法2是更优的选择；
• 另外，别忘了在then里先判断response.ok，避免把非JSON的错误响应当成数据处理。

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