jQuery生成另一個HTML元素內的HTML元素

Question

只是想知道如何使用元素作爲使用jQuery的另一個元素的文本。 這是我的代碼：

$("<a/>", { 
    "class": "test", 
    text: $("<span/>", { 
      "class": "label", 
      text:  "My Label" 
      }), 
    click: function(){ 
    console.log('clicked'); 
    } 
}).appendTo('#label_list'); 

輸出：跨度上使用的.html（）時

<a class="test"></a> 

輸出：

<a class="test">My Label</a> 

希望的輸出：

<a class="test"><span class="label">My Label</span></a> 

Answer 1

設置元素的text與設置元素的html有很大不同。 text實質上是元素立即包含的字符數據，不包括任何嵌套標籤。所以試圖把text中的html標籤沒有完成。您可以在<a>內設置html要嵌套<span>，而不是設置或者text或html直接爲你，就越jQuery的慣用方式來完成你想會是這樣的：

$("<a/>").addClass("test") 
     .click(function() { 
      console.log("click!"); 
     }) 
     .append($("<span/>").addClass("label") 
          .text("my label") 
     ); 

或者，如果您使用html堅持，你可以做這樣的事情：

$("<a/>").addClass("test") 
     .click(function() { 
      console.log("click!"); 
     }) 
     .html('<span class="label">my label</span>'); 

編輯：也是，當你設置text或html，你需要將其設置爲一個字符串。你的示例代碼沒有做任何事情，因爲你沒有使用字符串，而是使用$(...)，這是一個非字符串對象（一個jQuery對象）。

此外，對於更多的text和html（以及他們必須是字符串的事實）之間的區別，見jQuery的文檔的這些頁面：

• http://api.jquery.com/text/
• http://api.jquery.com/html/

Answer 2

如果你需要使用變量，你可以使用這樣的東西：

$('<a><span></span></a>') 
    .addClass('test') 
    .click(function...) 
    .find('span') 
    .addClass('label') 
    .text('my label') 
    .end() 
    .appendTo('#label_list'); 

但是，如果你只是想生成HTML，jQuery足夠聰明，可以創建HTML片段。

$('<a class="test"><span class="label">My Label</span></a>').appendTo('#label_list');