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

This is my jQuery function in script.js This function is use to fetch the feed from Flicker and populate the structure.

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

I want to populate html structure into another html page called "items.html"

我想将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);
   }
}

So how can I do it? Thanks !!!

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

3 个解决方案

#1

Here is a simplified version that does work.

这是一个有效的简化版本。

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);
    });  
}

I actually have no idea why your version didn't work.

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

It could be possible that the callback for getJSON needs to be an anonymous no name function, and that's why the displayImages function isn't working. I couldn't get it to work.

有可能getJSON的回调需要是一个匿名的无名称函数，这就是displayImages函数无法正常工作的原因。我无法让它发挥作用。

You do have a $ in front of your function declaration. Maybe that contributed to the problem.

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

Though the html string insert works, like Josh said DOM insertion with nodes is better than html insertion. If you're just looking for a quick and dirty solution html string insertion might be fine.

虽然html字符串插入工作，但像Josh说，DOM插入节点比html插入更好。如果你只是在寻找一个快速而肮脏的解决方案html字符串插入可能没问题。

#2

You can use ajax load function to load the html contents in your web page.

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

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

#3

You can load another html page into an element using:

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

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

You also shouldn't use string concatenation to build your dom elements.

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

Use something like this:

使用这样的东西：

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);

and so on...

等等...

#1