element1を文書に追加する前にelement2を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/>', { 
    'id': 'imageContainer' 
}); 

私がこのメソッドを使用したい理由は、クリックメソッドなどを添付することができるためです。あなたはまた、あなたの条件に基づいてこれを使用することができ、この

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

を試してみてください

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

Answer 1

1. はスパン

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

2. はその後、ちょうど

   を済ませます

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

3. は、今uは

にそれを追加したいものにスパンを追加

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

をJO

Answer 2

これを試してみてください：SOLUTION（@ParvSharmaのおかげで）更新

。

$('<span/>', { 
    'id': 'imageContainer' 
}).append('<p>Close</p><img src="image.jpg" />') 
.prependTo('body'); 

Answer 3

：

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 4

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

あなたはそれのjQueryオブジェクトを返すjQueryを使って要素を作成したら...