jquery - JavaScript variable value in element.append - Stack Overflow

admin管理员组

文章数量:1290956

$('#test-list').append($(document.createElement("li")).attr({id: data.msg}));
$('#'+data.msg).append($(document.createElement("img")).attr({src: "kep.php?kep=upload/"+data.msg+"&w=180;&h=150;"}));

Does not work, because of the $('#'+data.msg). param. I don't know how to fix it. I want to make a sub-element to the #test-list and name it to the value of data.msg variable.

$('#test-list').append($(document.createElement("li")).attr({id: data.msg}));
$('#'+data.msg).append($(document.createElement("img")).attr({src: "kep.php?kep=upload/"+data.msg+"&w=180;&h=150;"}));

Does not work, because of the $('#'+data.msg). param. I don't know how to fix it. I want to make a sub-element to the #test-list and name it to the value of data.msg variable.

• javascript
• jquery
• html
• ajax
• append

Share Improve this question Follow edited Dec 20, 2015 at 17:58 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 15, 2010 at 20:21 RépásRépás 1,82077 gold badges2828 silver badges5555 bronze badges 2

• 1 What is the value of data.msg and what exactly is not working? Any error messages? – Felix Kling Commented Feb 15, 2010 at 20:26
• 2 Does data.msg change over time? E.g. is this in a loop structure? – Ben Zotto Commented Feb 15, 2010 at 20:26

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You could chain this entire task:

  $("<li>")
    .appendTo("#test-list")
    .attr("id", data.msg)
    .append("<img>")
      .find("img:first")
      .attr("src", "kep.php?kep=upload/" + data.msg + "&w=180;&h=150;");

Which produces the following:

<li id="foo">
  <img src="kep.php?kep=upload/foo&amp;w=180;&amp;h=150;">
</li>

Where "foo" was the value of data.msg.

You are to be mixing DOM calls and jQuery in an odd way. I'd suggest doing it all with jQuery. The chain of elements is somewhat mixed up in terms of what you are appending to, and what you are specifying attributes for. You can specify the id, etc. directly in the creation of an element.

This should work:

$('#test-list').append($("<li id='"+data.msg+"'><img src='kep.php?kep=upload/"+data.msg+"&w=180;&h=150'></li>")

You can append the image as you create the <li>.

For example:

$('#test-list').append(
    $('<li><img src="kep.php?kep=upload/' + data.msg + '&w=180;&h=150" /></li>')
        .attr('id', data.msg)
    );

Try this out

var img = $("<img>").attr({src: "kep.php?kep=upload/"+data.msg+"&w=180;&h=150;"});
$("<li>").attr({id: data.msg}).append(img).appendTo('#test-list');

If you are using jQuery 1.4.x you can do:

var img = $("<img>",{src: "kep.php?kep=upload/"+data.msg+"&w=180;&h=150;"});
$("<li>",{id: data.msg}).append(img).appendTo('#test-list');

If I had to guess, I'd say that your data.msg has a value that isn't allowed as an ID for selector purposes (generally starting with [-a-zA-Z] and containing [_-\da-zA-Z]. If your image name (data.msg) begins with, or is a number, I'd suggest adding a prefix to the id.

In either case, you can do this in a single statement...

$("<li/>")
  .attr("id", data.msg)
  .append(
    $("<img/>")
      .attr("src", "kep.php?kep=upload/"+data.msg+"&w=180;&h=150")
  )
  .appendTo("#test-list");

本文标签： jqueryJavaScript variable value in elementappendStack Overflow