jQuery .html() method syntax

Question

So here's the full function/for-loop. I'm basically trying to grab images from Flickr and present them using Lightbox.

If you don't need all this info, just scroll down to "WHAT'S WRONG WITH THIS SYNTAX?" The jQuery .html() method that follows is giving me trouble. How does the syntax work in this instance? Thank you!

$.getJSON(requestURL, function(flickrResponse) {
    flickrResponse.items.forEach(function (item) {

        // create a new a element and hide it
        var $anchor = $("<a>").hide();

        // set the href attribute of the a element to connect to the same Flickr image 
        // that the img element connects to
        $anchor.attr("href", item.media.m);

        // set the data-lightbox attribute, and use "Flickr" as the value of the attribute
        $anchor.attr("data-lightbox", "Flickr");

        // create a new JQuery element to hold the image
        // but hide it so we can fade it in
        var $img = $("<img>").hide();

        // set the attribute to the url
        // contained in the response
        $img.attr("src", item.media.m);

        // WHAT'S WRONG WITH THIS SYNTAX?
        // Use the jQuery.html() method to set the img element as the innerHTML of the a element.
        $($anchor).html($img);

        // attach the img tag to the main
        // photos element and then fade it in
        $("main.photos").append($anchor);
        $anchor.fadeIn();
    });

});

The corresponding HTML file:

<!doctype html>
<html>
  <head>
    <title>Flickr App</title>
    <link href="stylesheets/styles.css" rel="stylesheet">
    <link href="stylesheets/lightbox.min.css" rel="stylesheet">
  </head>
  <body>
    <header>
    </header>

    <main>
     <div class="photos">
     </div>
    </main>

    <footer>
    </footer>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="javascripts/lightbox.min.js"></script>
    <script src="javascripts/app-lightBox.js"></script>
  </body>
</html>

Looks like a test question. $anchor is already a jQuery object, it's not necessary to use the $() syntax around it. But does it fail if you do? What's the problem you are experiencing? — Shanimal
– Shanimal, Commented May 10, 2016 at 23:08
@Shanimal The browser doesn't throw any errors. It just gives me a blank page. (One moment--I'm copying it over) — nxheller
– nxheller, Commented May 10, 2016 at 23:12
Hey @Zed, is giving me trouble is not descriptive enough. Give us something a little more to go with!! — PeterKA
– PeterKA, Commented May 10, 2016 at 23:13
@PeterKA In the HTML file I pasted above, the <div class = "photos"> is waiting to be populated by the JS script. I don't get any errors, but rather an empty page. Using the browser debugger, it looks like image URLs (in the src attribute) are being retrieved, but perhaps not displayed? — nxheller
– nxheller, Commented May 10, 2016 at 23:19

Bruno Costa · Accepted Answer · 2016-05-10 23:17:37Z

2

In JS you only forgot to take the hide "var $img".

If you change line, it should work:

var $img = $("<img>").hide();

For:

var $img = $("<img>");

And you have to change this line:

$("main.photos").append($anchor);

For:

$("main .photos").append($anchor);

OR

$(".photos").append($anchor);

I don't know if the flickrResponse is correct

answered May 10, 2016 at 23:17

Bruno Costa

789 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nxheller Over a year ago

Thank you! Why does there need to be a space in "main .photos"?

Emilio · Accepted Answer · 2016-05-10 23:30:31Z

0

You just made a simple mistake. here is what you need to really do:

$($anchor).html('img');

answered May 10, 2016 at 23:30

Emilio

715 bronze badges

Comments

PeterKA · Accepted Answer · 2016-05-10 23:39:28Z

0

Per it's signature, .html() method accepts either a string, or a function.

.html( htmlString )
.html( function )

Either you want to construct a string(html) representation of the image or use the .append() method which accepts a jQuery object, like so:

$anchor.append( $img )

edited May 10, 2016 at 23:39

answered May 10, 2016 at 23:21

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

3 Comments

nxheller Over a year ago

Does this set the img element as the innerHTML of the a element?

PeterKA Over a year ago

Yes, indeed it does.

alepeino Over a year ago

I thought this at first, but I tried it and in fact passing the jQuery element $img to the html method has the expected result. (setting its html). Probably Bruno Costa is on the right track with his answer...

Collectives™ on Stack Overflow

jQuery .html() method syntax

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related