Добавить element2 к element1 перед добавлением element1 к документу

Question

Я хочу создать элемент динамически с помощью 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;
}

Answer 1

1. сделать интервал

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

2. , затем просто сделать

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

3. затем jo

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

4. теперь добавьте span к любому значению, которое вы хотите добавить к

Answer 2

Попробуйте это

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

Answer 3

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

Как только вы создаете элемент с помощью jQuery, он возвращает его объект jQuery ...

Answer 4

Попробуйте это:

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