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