如何评估jQuery追加中的javascript变量？

Question

I have an array of objects ( array ), each with a property containing a URL string that routes to an image. I am trying to use jQuery to loop through this array and append each object's image into a div . Here is my code:

for (var i = 0; i < array.length; i++) {
    $('#div').append("<img src=\"array[i].URL\" alt=\"pic\">");
}

Note: I used the backslashes to escape the quotes in the img tag.

The javascript is not evaluating inside the append method and it is simply printing "array[i].URL" for the image address on the page.

Can someone give me a heads-up on what I'm doing wrong here?

Answer 1

You have a bunch of options:

1. $() and attr :

    for (var i = 0; i < array.length; i++) { $('#div').append( $('<img alt="pic">').attr("src", array[i].URL) ); } 

2. String concatenation:

    for (var i = 0; i < array.length; i++) { $('#div').append( '<img src="' + array[i].URL + '" alt="pic">' ); } 

3. In ES2015+, you have template strings :

    for (var i = 0; i < array.length; i++) { $('#div').append( `<img src="${array[i].URL}" alt="pic">` ); } 

   Note the ${ and the } — the bit in-between them is evaluated by the JavaScript engine and swapped in a that point. Also note that they're quoted with backticks, not single or double quotes.