jQuery-创建一个属于特定对象的“图像链接” <div> 类

Question

我想创建一个图像元素，并使用jQuery在类中分配/包装它。 该图像还必须充当链接，即当用户单击它时，应打开指定的网站。 以下示例代码创建一个指向Google网站的图像元素。 如何将此元素分配给指定的类？

$('<img />').attr({'src':src})
.appendTo($('<a />').attr({href:'http://www.google.com'}).appendTo($('#targetLocation')));

Answer 1

var img    = $('<img />', {src:src, 'class':'imgClass'}),
    anchor = $('<a />'  , {href:'http://www.google.com'}),
    div    = $('<div />', {'class':'myClass'});

div.append( anchor.append(img) ).appendTo( $('#targetLocation') );

最终以

<div id="targetLocation">
    <div class="myClass">
        <a href="http://www.google.com">
           <img src="whatever" class="imgClass" />
        <a/>
    </div>
</div>

而且您以正确的方式进行操作，可以使用实际的修饰对象时不应该使用字符串。

Answer 2

为什么不只创建并附加变量？

var imgElement = "<a href='www.yourlink'><img class="your class" src="your src"/></a>";
$("#targetLocation").append(imgElement);

Answer 3

只需将所有html生成为字符串并调用

var theHtmlString = 
    "<a href="http://google">" +
    "  <img src="whatever"></img>" +
    "</a>";
$('#targetLocation').append(theHtmlString);

尽管这也会将此HTML添加到目标location元素中，您可能需要替换该元素：

$('#targetLocation').html(theHtmlString);