我想用jQuery动态创建一个元素,并在其中动态放置另一个元素,但在我追加它之前。
例如,我希望输出看起来像这样:
<span class="imageContainer">
<p>Close</p>
<img src="image.jpg" />
<span>
我可以使用以下内容,但它阻止我使用提供属性的其他方法:
$('<span class="imageContainer"><p>Close</p><img src="image.jpg" /></span>').prependTo('body');
我目前正在使用此代码创建span元素,并想知道在将其附加到任何内容之前如何向其添加代码,这可能是一个我只是忽略的简单解决方案:
$('<span/>', {
'id': 'imageContainer'
});
我想使用这种方法的原因是,我可以一次性附加点击方法等。
更新的解决方案(感谢@ParvSharma):
function hoverBox( url, e ) {
var hoverbox = $( '<span/>', {
'id': 'imageContainer',
'style': 'top:'+e.pageY+'px; left:'+e.pageX+'px;'
}).append(
$('<p/>', {
html: 'Close',
click: function() {
var parentContainer = '#'+$(this).parent().attr('id');
destroy( parentContainer );
}
})
).append(
$('<img/>', {
'src': url
})
);
return hoverbox;
}
答案 0 :(得分:3)
制作范围
var span = $('<span/>', { 'id': 'imageContainer'});
然后就这样做
span.append($("<p></p>"));
然后jo
span.append($("<img></img>"));
答案 1 :(得分:1)
试试这个:
$('<span class="imageContainer"><p>Close</p><img src="image.jpg" /></span>')
.find('p')
.click(function() {
// click code here.
})
.end()
.prependTo('body');
答案 2 :(得分:1)
试试这个
$('<span class="imageContainer"><p>Close</p><img src="image.jpg" /></span>').find("img").attr({}).end().prependTo('body');
您也可以根据您的要求使用它。
$('<span/>', {
'id': 'imageContainer'
}).append('<p>Close</p><img src="image.jpg" />')
.prependTo('body');
答案 3 :(得分:1)
$('<span/>', {'id':'theId'}).click(....);
一旦用jQuery创建一个元素,它就会返回它的jQuery对象......