关于 jQuery .append() 的问题答案

【问题标题】：Question about jQuery .append()关于 jQuery .append() 的问题
【发布时间】：2011-04-05 03:02:02
【问题描述】：

谁能帮我理解为什么这条线没有创建带有链接的图像：

var img = new Image();
$('#id').html('<a href="http://google.com">').append(img).append('</a>');

我正在设置 img 属性（src、alt...等），我只是将这些行去掉，因为它们不相关。这不应该将 DIV 的 HTML 设置为 HREF，然后是图像，然后是结束 A 标记吗？这对我不起作用，我是不是走错了路？

【问题讨论】：

标签： jquery

【解决方案1】：

应该这样做：

$(img).appendTo('#id').wrap('<a href="http://google.com" />');

现场演示： http://jsfiddle.net/simevidas/A4HqE/1/

jQuery 的html() 会自动关闭你的HTML 元素。见这里：http://jsfiddle.net/simevidas/Ut2pQ/

更好的解决方案：

$('<a href="http://google.com" />').append(img).appendTo('#id');

这个解决方案更好，因为这里 DOM 只被操作一次（当附加 ANCHOR 时）。在我上面的原始解决方案中，对 DOM 进行了两次操作（1. 附加了 IMG，2. 将 ANCHOR 包裹在图像周围）。

现场演示： http://jsfiddle.net/simevidas/A4HqE/2/

【讨论】：

【解决方案2】：

Append 是一个棘手的标签，有时它并没有达到你的预期。

在许多情况下，使用 appendTo 并实际构建元素更容易。

你必须附加一些东西……它不像一个字符串生成器。试试：

$('<a>').attr({'id': 'aId'  'href': '[path for link]'}).appendTo('#divId');
$('<img>').attr('src', '[path to image]').appendto('#aId');

如果您已经使用new Image() 构建了图像，则可以使用 ITS id 作为选择器来附加到锚点...可以附加到 div。

【讨论】：

【解决方案3】：

.append 将整个标签作为输入，而不是开始标签：

$('#id').html('<a href="http://google.com"></a>').append(img);

【讨论】：

【解决方案4】：

我会这样做：

$('#id').append($('<a>').attr('href', 'http://www.google.com').append(img));

当然，您必须先设置图像的所有属性，然后才能正常工作。

【讨论】：