在前端开发中，我们经常需要将 HTML 代码加载到变量中进行操作。jQuery 是一个流行的 JavaScript 库，可以简化许多前端任务，包括将 HTML 加载到变量中。
使用 jQuery 的 load() 方法
jQuery 提供了 load() 方法，可以通过 AJAX 请求从服务器加载 HTML 内容。但是，我们也可以使用 load() 方法将本地 HTML 文件加载到变量中。下面是示例代码：
var htmlContent;
$(document).ready(function(){
$.get("example.html", function(data){
htmlContent = data;
console.log(htmlContent);
});
});上面的代码使用了 jQuery 的 $.get() 方法来异步加载名为 example.html 的本地文件，并将其存储在 htmlContent 变量中。然后，我们使用 console.log() 来输出变量内容以进行测试。
请注意，在上面的代码中，$.get() 方法是异步加载的，因此我们必须在回调函数中处理返回的数据。
使用 jQuery 的 ajax() 方法
除了 load() 方法之外，还可以使用 jQuery 的 ajax() 方法来加载 HTML 文件并将其存储在变量中。下面是示例代码：
-- -------------------- ---- -------
--- ------------
--------
---- ---------------
------ ------
-------- ---------------
----------- - -----
-------------------------
-
---上面的代码使用了 $.ajax() 方法来同步加载本地文件 example.html 并将其存储在 htmlContent 变量中。请注意，我们在选项对象中设置了 async: false，以确保同步加载文件。
总结
以上就是使用 jQuery 将 HTML 加载到变量中的两种方法：load() 和 ajax()。无论哪种方法，都需要注意异步和同步加载的区别，以确保正确地处理返回的数据。
希望本文能够帮助您更好地理解如何使用 jQuery 加载 HTML 内容，并为您在前端开发中遇到类似问题时提供指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24576