jquery - jquery附加大量html

Question

我一直在使用 $.get 来获取我的灯箱的内容

$.get('sidebar-lightbox.html', function(data, elem) {

//DO STUFF HERE
 });

我正在寻找一种巧妙的方法来将大（ish）（可能是 20 行）的 HTML 添加到追加中。目前正在做

 $('.selector').append('<div id="wrapper"><div id="inner"><div id="content"></div></div></div>')

随着 html 变大，这有点混乱且难以阅读，正在寻找一种好方法:)。

Answer 1

$('<div/>', { id: 'wrapper' }).appendTo('.selector');
$('<div/>', { id: 'inner' }).appendTo('#wrapper');
$('<div/>', { id: 'content' }).appendTo('#inner');

如果您愿意，您还可以执行以下操作：

$('<div/>', { id: 'wrapper' }).append(
    $('<div/>', { id: 'inner' }).append(
        $('<div/>', { id: 'content' })
     )
).appendTo('.selector')​;

您当然可以在此处设置任意数量的属性，记住将作为 JavaScript 关键字的属性放在字符串中，即$('<div/>', { id: 'id', 'class': 'x' }). 您还可以链接多个.attr和.html调用以获取所需的标记。

Answer 2

首先创建一个 var，然后附加它。它会更具可读性

var stuff = '<div id="wrapper">';
    stuff += '<div id="inner">';

// etc. then you append it
$('.selector').append(stuff);