javascript - jQuery 在另一个 HTML 元素中生成 HTML 元素

Question

只是想知道如何使用 jQuery 将一个元素用作另一个元素的文本。 这是我的代码:

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

输出:

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

在 span 上使用 .html() 时的输出:

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

期望的输出:

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

Answer 1

设置text元素的设置与设置 html 非常不同的一个元素。 text本质上是元素立即包含的字符数据，不包括任何嵌套标签。所以试图将 html 标签放在 text 中没有完成任何事情。你可以设置 html嵌套 <span>在 <a> 内, 而不是设置 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/