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

jQuery generated HTML element inside another HTML element

本文关键字：元素 HTML jQuery 另一个      更新时间：2023-09-26

只是想知道如何使用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>

设置元素的text与设置元素的html有很大的不同。text本质上是由元素立即包含的字符数据，不包括任何嵌套的标签。所以试图把html标签在text不完成任何事情。您可以将html设置为在<a>中嵌套<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/

如果你需要使用变量，你可以这样使用:

$('<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');
相关文章：