使用vanilla javascript从XHR请求追加HTML

可以通过以下步骤实现：

1. 创建XMLHttpRequest对象：使用new XMLHttpRequest()创建一个新的XMLHttpRequest对象。
2. 设置请求参数：使用open()方法设置请求的方法（GET、POST等）和URL。
3. 注册回调函数：使用onreadystatechange属性注册一个回调函数，该函数会在请求状态改变时被调用。
4. 发送请求：使用send()方法发送请求。
5. 处理响应：在回调函数中，使用readyState属性和status属性来判断请求的状态，并处理响应数据。

下面是一个示例代码：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求参数
xhr.open('GET', 'https://example.com/api/data', true);

// 注册回调函数
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理响应数据
    var response = JSON.parse(xhr.responseText);
    var html = '';

    // 生成HTML内容
    response.forEach(function(item) {
      html += '<div>' + item.title + '</div>';
    });

    // 追加HTML到页面
    document.getElementById('container').innerHTML = html;
  }
};

// 发送请求
xhr.send();

在这个示例中，我们使用GET方法请求了一个API接口，并将返回的数据解析为JSON格式。然后，我们根据数据生成了一段HTML代码，并将其追加到页面中ID为"container"的元素中。

这种方式适用于需要通过AJAX从服务器获取数据并动态更新页面内容的场景，例如加载评论、实时更新数据等。

腾讯云相关产品推荐：

• 云函数（Serverless）：https://cloud.tencent.com/product/scf
• 云开发（小程序开发）：https://cloud.tencent.com/product/tcb
• 云存储（对象存储）：https://cloud.tencent.com/product/cos
• 云数据库（NoSQL数据库）：https://cloud.tencent.com/product/tcb
• 云网络（VPC）：https://cloud.tencent.com/product/vpc
• 云安全（Web应用防火墙）：https://cloud.tencent.com/product/waf
• 云视频（点播、直播）：https://cloud.tencent.com/product/vod
• 人工智能（语音识别、图像识别）：https://cloud.tencent.com/product/ai