jquery - 加载一个使用 .append() 在单独的 HTML 文件中的页面中 - 可能吗？

Question

我目前正在使用 .append() 将 div 添加到页面。但是，我希望能够更加精简并从完全独立的 HTML 文件中加载 div，而不是在 JS 文件中保存 div 和内容。

这是我目前拥有的：

jQuery：

$('.addNewContent').click(function() {
$( '#content' ).append( "new content" );
return false;
});

我已经看到已经有一个相关的问题，但是没有关于它是如何实现的倾向 - 将HTML 文件内容加载到 Div [不使用 iframe]

我想知道是否有人有任何想法？任何帮助将不胜感激！

Answer 1

您可以使用以下.get()功能：

$('.addNewContent').click(function() {
    $.get("/path/to/file", function(data) {   
       $("#content").append(data);
    });
    return false;
});

Answer 2

您可能需要加载功能：

$('.addNewContent').click(function(e) {
    $( "#content" ).load( "ajax/test.html #container" );
    e.preventDefault();
});

请注意，加载实际内容可能需要一段时间；它还将替换 中的内容#content，但您可以在其中创建另一个元素，然后将内容加载到其中：

$("<div></div>").appendTo("content").load( "ajax/test.html #container" );

Answer 3

假设 html 文件在同一台服务器上...

$(".addNewContent").click(function() {
    $("#content").load("other-page.html #containerID");
    return false;
});

这将加载另一个 html 页面并将内容#containerID放入#content.