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本质上是元素直接包含的字符数据，不包括任何嵌套标记。所以试图在text中放置html标签并不能完成任何事情。您可以将html设置为在<span>内嵌套<a>，但不是直接设置text或html，jQuery-idiomatic越多实现你想要的方式就像这样：

$("<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文档的这些页面：

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

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

2 个答案: