如何使用 jQuery 加载外部 HTML 文件？

在本文中，我们将学习如何将外部 HTML 文件加载到div元素中。

示例代码中使用了以下 jQuery 函数。

• ready()：就绪事件发生在 DOM（文档对象模型）已加载。

• load()： load()方法从服务器加载数据并将返回的数据放入所选元素。

注意：在执行任何进一步的任务之前，我们将使用ready()函数来确保我们的 DOM 已完全准备好。我们将使用load()函数加载外部 HTML。

方法：

• 首先，我们将创建我们的外部 HTML 文件。
• 在要加载外部 HTML 的 HTML 文件上添加一个div元素。
• 在脚本下，使用ready()函数检查 DOM 是否就绪。
• 然后使用load()选择我们要在其上加载 HTML 的div元素。

外部文件：以下 div-1.html 和 div-2.html 文件用作外部文件。

div-1.html

HTML

  

    
    
    
    

  

    
This content is from first div.

  

div-2.html

HTML

  

    
    
    
    

  

    
This is content from second div

  

HTML 代码：以下代码演示了如何将外部文件加载到 HTML div 中。

HTML

  

    
    
    
  
    
    
  
    
    
        div {
            border: 2px solid green;
            width: fit-content;
            margin: 20px auto;
            padding: 2px 20px;
            cursor: pointer;
        }
  
        p {
            font-size: 14px;
        }
    

  

  
    
    
        First Div
        Click to load first html
    
  
    
    
        Second div
        Click to load first html
    
  
    
    
  
        // Check if file is completely ready
        $(document).ready(function () {
  
            // Adding click event on id div-1
            // if it clicked then anonymous
            // function will be called
            $('#div-1').click(function () {
  
                // Load the exertnal html
                // here this refers to 
                // current selector
                $(this).load('div-1.html');
            });
  
            // Same as above
            $('#div-2').click(function () {
                $(this).load('div-2.html');
            });
        });
    

  

输出：

注意：我们使用的是 jQuery click()函数，这意味着外部文件将在我们点击后加载。但是如果你想在 DOM 准备好后立即加载外部文件，只需省略click()事件并调用load()函数