Question

我目前正在使用.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]

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

Answer 1

您可能需要load功能：

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

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

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

Answer 2

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

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

这将加载其他html页面并将#containerID的内容放入#content。

Answer 3

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

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

使用.append（） - 可能的？</div>从单独的HTML文件中加载<div>

3 个答案: