.load() html 三个 append() 之后

Question

我想 load() 一些外部 html 我必须将其嵌入到三个（！）包装器中。这是我需要的结果：

<body>
    <section class="page">
        <div class="wrapper">
            <div class="backdrop">
                <!-- Loaded HTML -->
            </div>
        </div>
    </section>
</body>

以下代码工作正常并且看起来很干净，但是，我想添加许多 <section>，因此以某种方式链接那些 append() 和 load() 会更好：

$('body')        .append('<section class="page"></section>');
$('section.page').append('<div class="wrapper"></div>');
$('div.wrapper') .append('<div class="backdrop"></div>');
$('div.backdrop').load  ('partials/test.html');

我找到了一些链接 append() 的示例，但是，我未能将它们与 load() 结合起来。

提前致谢！ :)

Answer 1

不需要使用三个单独的 append 调用，正如您所指出的，如果您添加多个部分，这些编码方式将不起作用。

相反，创建完整的部分片段，将其附加到正文，然后加载到背景中：

$(
'<section class="page">' +
    '<div class="wrapper">' +
        '<div class="backdrop"></div>' +
    '</div>' +
'</section>'
)
.appendTo('body')
.find('div.backdrop')
.load('partials/test.html');;

如果将 HTML 与代码分开，会更简洁一些，例如：

var sectionTemplate = 
    '<section class="page">' +
        '<div class="wrapper">' +
            '<div class="backdrop"></div>' +
        '</div>' +
    '</section>';

然后

$(sectionTemplate)
.appendTo('body')
.find('div.backdrop')
.load('partials/test.html');;

.load() html 三个 append() 之后

.load() html after three append()

jquery

load

append