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

Val*_*yev 7 html javascript jquery

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

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

谢谢.

小智 22

$('First Element').add($('Second Element')).appendTo($('body'))


Jam*_*mes 10

字符串连接(或Array.join)没问题,只要你做得漂亮;)

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

$(structure.join('')).appendTo(container);
Run Code Online (Sandbox Code Playgroud)


vez*_*ult 5

总有append().

$('#container').append('<span>foobar baz</span>');
Run Code Online (Sandbox Code Playgroud)

在我看来,只使用字符串连接和追加将是最不复杂的,可能是最快的选择.但是,以下是一个未经测试的示例(可论证)简化元素的创建,并允许您将它们附加到给定的父元素:

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'));
Run Code Online (Sandbox Code Playgroud)