在将 element1 附加到文档之前将 element2 附加到 element1答案

【问题标题】：Append element2 to element1 before appending element1 to document在将 element1 附加到文档之前将 element2 附加到 element1
【发布时间】：2011-10-24 11:30:10
【问题描述】：

我希望使用 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;
}

【问题讨论】：

标签： javascript jquery dynamic append

【解决方案1】：

制作跨度

var span = $('<span/>', { 'id': 'imageContainer'});
那就做吧

span.append($("<p></p>"));
然后乔

span.append($("<img></img>"));
现在将 span 附加到您想要附加到的任何内容上

【讨论】：

【解决方案2】：

$('<span/>', {'id':'theId'}).click(....);

一旦你用 jQuery 创建了一个元素，它就会返回它的 jQuery 对象......

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

试试这个：

$('<span class="imageContainer"><p>Close</p><img src="image.jpg" /></span>')
    .find('p')
        .click(function() {
            // click code here.
        })
    .end()
    .prependTo('body');

【讨论】：