📌  相关文章
📜  js 从文件中加载 div - Javascript (1)

📅  最后修改于: 2023-12-03 14:43:30.301000             🧑  作者: Mango

使用JavaScript从文件中加载DIV

在Web开发中，加载HTML文件中的内容是非常常见的需求。而JavaScript提供了很多方法来实现这一功能。在我们的示例中，我们将演示如何从文件中加载一个DIV元素。

创建HTML文件

首先我们需要创建一个HTML文件，并在其中添加一个DIV元素。在这个示例中，我们使用以下代码：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript Load DIV from File Example</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="load-div.js"></script>
  </body>
</html>

在这个代码中，我们有一个空的DIV元素，它的id属性为“content”。我们还在文件底部添加了一个名为“load-div.js”的JavaScript文件的引用。

创建JavaScript文件

在这个JavaScript文件中，我们将使用AJAX来从另一个HTML文件中加载DIV元素。在这个示例中，我们使用以下代码：

// load-div.js
var xhr = new XMLHttpRequest();
xhr.open('GET', 'div-content.html', true);
xhr.onreadystatechange = function() {
  if (this.readyState !== 4) return;
  if (this.status !== 200) return; 

  var container = document.getElementById('content');
  container.innerHTML = this.responseText;
};
xhr.send();

在这个代码中，我们使用XMLHttpRequest对象来发送GET请求以获取另一个HTML文件中的内容。当请求完成时，我们将检查响应状态，如果响应状态为200，我们就将获取的内容加载到HTML文件中的DIV元素中。

创建另一个HTML文件

为了测试我们的代码，我们需要创建另一个HTML文件，并在其中添加一个DIV元素。在这个示例中，我们使用以下代码：

<!-- div-content.html -->
<div>
  <h1>Hello JavaScript!</h1>
  <p>Thanks for loading me!</p>
</div>
完整示例代码

以下是完整的示例代码：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript Load DIV from File Example</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="load-div.js"></script>
  </body>
</html>

// load-div.js
var xhr = new XMLHttpRequest();
xhr.open('GET', 'div-content.html', true);
xhr.onreadystatechange = function() {
  if (this.readyState !== 4) return;
  if (this.status !== 200) return; 

  var container = document.getElementById('content');
  container.innerHTML = this.responseText;
};
xhr.send();

<!-- div-content.html -->
<div>
  <h1>Hello JavaScript!</h1>
  <p>Thanks for loading me!</p>
</div>
总结

使用JavaScript从文件中加载HTML元素是很简单的。我们只需要使用XMLHttpRequest对象来发送请求并获取响应，然后将响应内容加载到HTML文件中的相应元素中即可。