点击p触发XHR请求，如何将结果输出到event.target的下一个div？

没问题，这是个典型的「批量元素交互 + AJAX结果定向插入」场景，我给你准备了完整的代码示例，还会把关键细节给你讲清楚：

HTML 结构示例 #

首先我们需要构建重复的p触发元素和对应的结果div，保证每个p的下一个元素就是用来展示响应的容器：

<div class="content-group">
  <p class="load-trigger">点击加载内容组1</p>
  <div class="response-container"></div>

  <p class="load-trigger">点击加载内容组2</p>
  <div class="response-container"></div>

  <p class="load-trigger">点击加载内容组3</p>
  <div class="response-container"></div>
</div>

JavaScript 实现代码 #

这里推荐用事件委托来处理点击（毕竟页面有大量相同元素，逐个绑定事件太浪费性能），然后通过event.target定位触发元素，再找到它的下一个div：

// 给父容器绑定点击事件，统一处理所有p的点击
document.querySelector('.content-group').addEventListener('click', function(event) {
  // 先确认点击的是我们要处理的p元素
  if (event.target.tagName !== 'P') return;

  const clickedP = event.target;
  // 获取p的下一个元素节点（这里就是目标div）
  const targetDiv = clickedP.nextElementSibling;

  // 做个安全校验：确保下一个元素确实是div，避免出错
  if (!targetDiv || targetDiv.tagName !== 'DIV') {
    console.warn('目标展示容器不存在');
    return;
  }

  // 发起XHR请求
  const xhr = new XMLHttpRequest();
  // 替换成你的实际接口地址，也可以根据点击的p传不同参数（比如用dataset）
  xhr.open('GET', '/your-api-url', true);

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 将响应文本插入到目标div中
      targetDiv.textContent = xhr.responseText;
      // 如果接口返回的是HTML内容，改用innerHTML：targetDiv.innerHTML = xhr.responseText;
    } else {
      targetDiv.textContent = `加载失败：${xhr.statusText}`;
    }
  };

  xhr.onerror = function() {
    targetDiv.textContent = '请求发生网络错误';
  };

  xhr.send();
});

关键细节说明 #

1. 事件委托的优势：不用给每个p单独绑定事件，父容器监听所有子元素的点击，通过event.target识别触发源，适合页面有大量重复元素的场景，性能更好。
2. nextElementSibling vs nextSibling：nextSibling会返回当前元素的下一个节点（包括空白文本节点，比如HTML里的换行），而nextElementSibling只返回元素节点，所以用它能精准拿到我们要的div。
3. 安全校验：添加了对目标div的存在性和类型校验，避免因为HTML结构意外变化导致代码报错。
4. 响应内容处理：如果接口返回的是纯文本，用textContent更安全；如果是HTML片段，用innerHTML，但要注意XSS风险（如果内容不可信，尽量避免用innerHTML）。

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