在将元素附加到文档之前将元素附加到元素

时间:2011-08-10 21:16:00

标签: javascript jquery dynamic append

我想用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;
}

4 个答案:

答案 0 :(得分:3)

  1. 制作范围

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

  2. 然后就这样做

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

  3. 然后jo

    span.append($("<img></img>"));

  4. 现在追加任何你想要附加到
  5. 的范围

答案 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对象......