如何调整JavaScript AJAX脚本将响应中的两个段落分别插入对应HTML Div中

这问题挺常见的，咱们可以通过创建一个临时DOM容器来解析AJAX返回的HTML内容，这样就能精准提取到你需要的段落内容啦！

核心思路是：把AJAX返回的HTML字符串放到一个临时的隐藏DOM元素里，然后用标准的DOM查询方法获取到目标段落，再把它们的内容转移到你的目标div中。

修改后的完整脚本如下：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    // 创建临时DOM容器，用来解析返回的HTML
    const tempContainer = document.createElement('div');
    // 将响应的HTML内容注入临时容器
    tempContainer.innerHTML = xhttp.responseText;
    
    // 从临时容器中提取目标段落的内容
    const firstParaContent = tempContainer.getElementById('first_paragraph').innerHTML;
    const secondParaContent = tempContainer.getElementById('second_paragraph').innerHTML;
    
    // 将内容插入对应的div
    document.getElementById("first_div").innerHTML = firstParaContent;
    document.getElementById("second_div").innerHTML = secondParaContent;
  }
};
// 别忘了补上请求的打开和发送逻辑，示例：
// xhttp.open("GET", "你的请求目标URL", true);
// xhttp.send();

补充细节提示： #

• 如果你只需要段落里的纯文本（不需要保留p标签内的嵌套HTML结构），可以把.innerHTML换成.textContent，这样更安全，还能避免潜在的XSS风险。
• 为了防止响应中缺少目标元素导致脚本报错，可以加个简单的判断逻辑，比如：

  const firstPara = tempContainer.getElementById('first_paragraph');
  if (firstPara) {
    document.getElementById("first_div").innerHTML = firstPara.innerHTML;
  }
  

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