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

Question

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

I want to populate html structure into another html page called "items.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 !!!

Answer 1

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

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

Answer 2

You can load another html page into an element using:

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

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

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...

Answer 3

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.

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.