使用 .append() 从单独的 HTML 文件加载页面中的 <div> - 可能吗？答案

【问题标题】：Load a <div> in a page from a separate HTML file using .append() - possible?使用 .append() 从单独的 HTML 文件加载页面中的 <div> - 可能吗？
【发布时间】：2013-09-26 19:34:32
【问题描述】：

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

这是我目前拥有的：

jQuery:

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

我已经看到已经有一个相关的问题，但是没有关于它是如何实施的倾向 - Load HTML File Contents to Div [without the use of iframes]

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

【问题讨论】：

看看jQuery的.load()函数。
作为旁注，ajax 很棒，但是加载另一个 HTML 文件可以使您的网站更加“精简”，或者它可以把它搞砸，这取决于你在做什么！
基本上是为了不让.js文件臃肿。我想要达到的目标并不过分技术性 - 只是有点超出我的技能:)

标签： jquery html load append

【解决方案1】：

您可能需要load 函数：

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

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

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

【讨论】：

谢谢，我去看看！

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

你可以使用.get()函数：

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

【讨论】：