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

Question

我想做的是使用jQuery创建一个表格分页控件。它包含了许多链接和span标签。我已经通过字符串拼接实现了这一点，但我相信jQuery可以使它更加优雅。

由于生成过程中有相当多的过程性逻辑，所以我无法在这里使用jTemplates。

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

谢谢。

- Valentin V

Answer 1

$('第一个元素').add($('第二个元素')).appendTo($('body'))

- craigsrose

---

这在2009年可能有效，但今天会出现一个错误消息，该消息取决于jQuery版本。jsFiddle。有效的方法是 $('first').add($('second')).appendTo(...)。 - Roman Starkov

我测试了一下，@romkyns 是正确的。我已经相应地编辑了答案。 - Timwi

Answer 2

字符串拼接（或Array.join）没问题，只要你使其看起来漂亮就好了 ;)

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

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

- James

Answer 3

在it技术中，总是有一个叫做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'));

- vezult

Answer 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方法中使用``或反引号即可

- Paul Jolou