如何将 html 元素填充到另一个页面中？答案

【问题标题】：How can I populate html elements into another page?如何将 html 元素填充到另一个页面中？
【发布时间】：2012-12-04 05:40:52
【问题描述】：

这是我在 script.js 中的 jQuery 函数此函数用于从 Flicker 获取提要并填充结构。

我想将 html 结构填充到另一个名为“items.html”的 html 页面中

$function getImages(){
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=90528678@N03&lang=en-us&format=json&jsoncallback=?", displayImages);   

  function displayImages(data) {      

// Start putting together the HTML string
var htmlString = '';         

// Now start cycling through our array of Flickr photo details
    $.each(data.items, function(i,item){
    // Here's where we piece together the HTML
    htmlString += '<div class="item_wrapper" name="'+item.title+'">';
    htmlString += '<img class="item_picture" src="' + item.media.m + '" alt=""/>';
    htmlString += '<div class="item_data">';
    htmlString += '<div class="item_company">';
    htmlString += '<h3 class="fi se en">'+item.title+'</h3>';
    htmlString += '</div>';
    htmlString += '<div class="item_title">';
    htmlString += '<h3 class="fi">'+item.title+'</h3>';
    htmlString += '<h3 class="se">'+item.title+'</h3>';
    htmlString += '<h3 class="en">'+item.title+'</h3>';
    htmlString += '</div>';
    htmlString += '</div>';
    htmlString += '</div>';
});   
     // Pop our HTML in the DIV tag of items.html 
     // Here's the problem. 
    $('div').html(htmlString);
   }
}

那我该怎么做呢？谢谢！！！

【问题讨论】：

如果您的问题仍然需要帮助，您应该在帖子中添加更多信息；主要是你试图为你的用户提供什么功能。您提出的技术问题很好，但是由于您对 HTML 和 jQuery 的经验是新手（您的话：P），您很有可能通过其他方式达到您想要完成的目标

标签： jquery html flickr

【解决方案1】：

这是一个可以工作的简化版本。

getImages();
function getImages(){
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=90528678@N03&lang=en-us&format=json&jsoncallback=?",
    function(data) {
        var htmlString = '';
        $.each(data.items, function(key, value){
                htmlString += '<div>'+value.title+'</div>';
                htmlString += '<img src="'+value.media.m+'">';
        });
        $('div').html(htmlString);
    });  
}

我实际上不知道为什么您的版本不起作用。

getJSON 的回调可能需要是匿名的无名函数，这就是 displayImages 函数不起作用的原因。我无法让它工作。

你的函数声明前面确实有一个 $。也许这导致了问题。

虽然 html 字符串插入有效，但正如 Josh 所说，带节点的 DOM 插入优于 html 插入。如果您只是在寻找一个快速而肮脏的解决方案，html 字符串插入可能会很好。

【讨论】：

【解决方案2】：

您可以使用ajax加载功能来加载您网页中的html内容。

$('div').load("file.html");

【讨论】：

【解决方案3】：

您可以使用以下方法将另一个 html 页面加载到元素中：

$('div').load("items.html");

您也不应该使用字符串连接来构建您的 dom 元素。

使用这样的东西：

var div = $('<div/>');

$.each(data.items, function(i, image) {

    var item = $('<div/>').addClass("item_wrapper").attr('name', image.title);

    $('<img/>').attr('src', image.media.m).appendTo(item);

    item.appendTo(div);

});

$('div').html(div);

等等……

【讨论】：

谢谢先生。但我不明白。我要做的只是将填充的 html 元素放入 items.html 中，因此稍后将有另一个函数调用 items.html，它已经具有从 getImages() 函数填充的 html 结构。 PS。我是 HTML 和 jQuery 的新手 :)