ajax如何获取div内容，ajax获取元素文本

时间：2026-06-21 15:16:12|栏目：AJAX相关|点击：次

在Web前端开发中，通过Ajax技术动态获取

是一项基础且高频的需求，核心上文小编总结是：虽然原生Ajax请求（如XMLHttpRequest或Fetch API）主要用于获取服务器返回的数据，但若目标是获取当前页面中某个

的HTML或文本内容，最优雅且符合现代开发规范的做法并非发起网络请求，而是直接利用DOM操作API（如document.getElementById配合innerHTML或textContent），若必须通过Ajax从服务器获取该

渲染后的最终内容（例如包含服务端动态生成的复杂结构），则应使用Fetch或jQuery Ajax请求服务器接口，并在成功回调中通过innerHTML赋值给目标

，以下将深入剖析这两种场景的技术实现、性能差异及最佳实践。

ajax如何获取div内容

获取当前页面静态或动态生成的DOM内容

当

已经存在于当前页面的DOM树中，无论是初始加载的还是由前端JS动态生成的，都不需要发起网络请求，直接操作DOM是效率最高、延迟最低的方案。

获取纯文本内容 若只需获取

内的文字信息，推荐使用textContent属性，它不会解析HTML标签，性能优于innerHTML，且能避免潜在的XSS（跨站脚本攻击）风险,因为返回的是纯字符串。

const divElement = document.getElementById('myDiv');
const textContent = divElement.textContent;
console.log(textContent);

获取包含HTML标签的结构内容 若需要保留

内部的HTML结构（如嵌套的、等），则需使用innerHTML，需要注意的是，innerHTML会触发浏览器的HTML解析器，对于内容极其庞大的

，频繁读写可能会引起重排（Reflow）,影响页面性能。

const htmlContent = divElement.innerHTML;

获取渲染后的最终状态 有时

可能由CSS伪元素或JavaScript动态计算得出，若需获取用户视觉上看到的最终文本，innerText是更好的选择，它考虑了CSS样式（如display: none的元素不会被获取），但性能略低于textContent。

通过Ajax从服务器获取动态渲染的Div内容

在实际业务中，常遇到需要获取服务器端动态生成的HTML片段并插入到页面

中的情况，分页加载、无限滚动或局部刷新，Ajax的作用不再是“获取”DOM，而是“获取数据”或“获取HTML字符串”，然后由前端将其注入到目标

中。

使用现代Fetch API Fetch API基于Promise，语法简洁,是现代前端开发的首选。

fetch('/api/get-div-content')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.text(); // 假设服务器返回的是HTML字符串
  })
  .then(html => {
    const targetDiv = document.getElementById('targetDiv');
    targetDiv.innerHTML = html; // 将服务器返回的HTML注入到div中
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

使用jQuery Ajax（传统项目兼容） 对于遗留系统或需要广泛兼容性的项目，jQuery的$.ajax依然常用,其优势在于内置了数据类型转换和错误处理机制。

$.ajax({
  url: '/api/get-div-content',
  type: 'GET',
  dataType: 'html', // 明确指定返回类型为HTML
  success: function(data) {
    $('#targetDiv').html(data); // 直接赋值，jQuery会自动处理HTML注入
  },
  error: function(xhr, status, error) {
    console.error('Ajax error:', error);
  }
});