如何使用 jQuery 创建多个 HTML 元素？答案

【问题标题】：How to create multiple HTML elements with jQuery?如何使用 jQuery 创建多个 HTML 元素？
【发布时间】：2009-04-14 11:44:54
【问题描述】：

我想要做的是使用 jQuery 创建一个表格分页器控件。它包含许多链接和跨度。我已经设法用普通的字符串连接来做到这一点，但我不敢相信 jQuery 不能让它更优雅。我不能在这里使用 jTemplates，因为生成有相当多的程序逻辑。

问题：有没有办法用 jQuery 创建一个 HTML 元素数组并将它们附加到某个容器中？

谢谢。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

$('<strong>First Element</strong>').add($('<i>Second Element</i>')).appendTo($('body'))

【讨论】：

这可能在 2009 年有效，但今天它失败并显示取决于 jQuery 版本的错误消息。 jsFiddle。有效的是$('first').add($('second')).appendTo(...)。
我对此进行了测试，@romkyns 是对的。我相应地编辑了答案。

【解决方案2】：

字符串连接（或 Array.join）没问题，只要你让它漂亮；）

var structure = [
    '<div id="something">',
        '<span>Hello!</span>',
    '</div>'
];

$(structure.join('')).appendTo(container);

【讨论】：

【解决方案3】：

总是有append()。

$('#container').append('<span>foobar baz</span>');

在我看来，仅使用字符串连接和追加将是最不复杂，并且可能是最快的选择。但是，以下是一个未经测试的示例，它（可以说）简化了元素的创建，并允许您将它们附加到给定的父元素：

function elemCreate(type, content, attrs) {
   /* type: string tag name
    * content: string element content
    * attrs: associative array of attrs and values
    */
    elem = '<' + type + '></' + type + '>'
    e = $(elem).attr(attrs)
    e.append(content)
    return e
}

stuff = [];    
stuff.push(elemCreate('a', 'Click me!', {'href': 'http://stackoverflow.com'});

$(stuff).appendTo($('#container'));

【讨论】：

【解决方案4】：

你可以通过这样做来简化事情:)

$('.parentElement').append(`
   <table style="width:100%">
     <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
   </table>
`);

只需要在append方法中使用``或反引号

【讨论】：