Значение переменной JavaScript в element.append

Question

$('#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;"}));

Не работает из-за параметра $('#'+data.msg).. Я не знаю, как это исправить. Я хочу создать подэлемент в # test-list и присвоить ему имя переменной data.msg.

Answer 1

Вы можете связать всю эту задачу:

  $("<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;");

Который производит следующее:

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

Где "foo" было значением data.msg.

Answer 2

Попробуйте это

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

Если вы используете jQuery 1.4.x, вы можете сделать:

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

Answer 3

Вы должны смешивать вызовы DOM и jQuery странным образом. Я бы предложил сделать все это с помощью jQuery. Цепочка элементов несколько перепутана с точки зрения того, что вы добавляете, и для чего вы указываете атрибуты. Вы можете указать идентификатор и т. Д. Непосредственно при создании элемента.

Это должно работать:

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

Answer 4

Вы можете добавить изображение при создании <li>.

Например:

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

Answer 5

Если бы мне пришлось угадывать, я бы сказал, что ваш data.msg имеет значение, которое не допускается в качестве идентификатора для целей выбора (обычно начинающееся с [-a-zA-Z] и содержащее [_- \ da-zA-Z]. Если имя вашего изображения (data.msg) начинается с или является числом, я бы предложил добавить префикс к идентификатору.

В любом случае вы можете сделать это в одном выражении ...

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