如何用jQuery将文本文件内容导入指定HTML <p>元素？

别担心，你已经找对方向了，只是缺几个关键步骤，我一步步帮你补全：

第一步：引入jQuery库 #

你之前的代码里没提到引入jQuery，这是核心前提！所有jQuery方法都依赖这个库才能运行。你可以在<head>标签里添加这行代码：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

如果不想用在线CDN，也可以下载jQuery的本地版本，用相对路径引入（比如src="jquery.min.js"），只要确保文件路径正确就行。

第二步：编写jQuery代码读取并插入文本内容 #

在HTML的<body>末尾（或者用$(document).ready()包裹在<head>里）添加这段代码，用来读取文本文件并把内容注入到#top_ten元素中：

$(document).ready(function() {
  // 替换成你的文本文件名，比如"top_ten_list.txt"
  $.get("your-text-file.txt", function(data) {
    // 用text()方法插入纯文本内容
    $("#top_ten").text(data);
    // 如果你的文本里包含HTML标签，想以HTML格式展示，就换成html()：
    // $("#top_ten").html(data);
  })
  .fail(function() {
    // 处理读取失败的情况（比如文件找不到）
    $("#top_ten").text("无法加载数据，请检查文件路径是否正确");
  });
});

第三步：确认文件路径正确性 #

确保你的文本文件和HTML文件在同一个目录下，如果文件在子文件夹里，要写对相对路径（比如文件在data文件夹中，路径就是"data/top_ten_list.txt"）。

完整示例代码 #

这是补全后的完整HTML代码，你可以直接参考：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>S&#38P 500 Top Performers</title> 
  <meta name="description" content="Gather top performers from S&#38P 500"/> 
  <!-- 引入jQuery库 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <!-- 目标元素 -->
  <p id="top_ten"></p>

  <!-- jQuery核心逻辑 -->
  <script>
    $(document).ready(function() {
      $.get("top_ten_performers.txt", function(data) {
        $("#top_ten").text(data);
      })
      .fail(function() {
        $("#top_ten").text("加载数据失败，请检查文件路径");
      });
    });
  </script>
</body>
</html>

关键注意点 #

• 同源策略提示: 如果直接用file://协议打开本地HTML文件，部分浏览器会阻止读取本地文件。这时候建议用本地服务器（比如VS Code的Live Server插件、XAMPP）来运行页面，就能避免跨域问题。
• 换行格式处理: 如果文本文件里有换行，text()方法会保留换行但浏览器默认会显示成空格。如果想保留换行效果，可以用data.replace(/\n/g, "<br>")处理后，再用.html()插入内容。

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