从另一个页面追加元素？

Question

鉴于此 HTML：

index.html:

<div class="tile" data-tilename="test">
    <div class="tileHeader">Tile Name</div>
</div>

tile-content.html:

<div id="test-tile" class="tileContent">
       <!-- lots of stuff here. -->
</div>

我怎样才能得出以下结果？

<div class="tile">
    <div class="tileHeader">Tile Name</div>
    <div class="tileContent">
       //lots of stuff here.
    </div>
</div>

目前所有这些都是动态创建的，所以这是我当前的代码：

let $elTile = $('<div/>', {
    class: 'tile'
}).appendTo($elContainer);

let $elTileHeader = $('<div/>', {
    class: 'tileHeader',
    html: tile.header
}).appendTo($elTile);

let $elTileContent = $('<div>').load('tile-content.html #' + tile.name + '-tile');
$elTile.append($elTileContent);

上面最后两行的灵感来自this solution。不幸的是，它增加了一个我想避免的额外 <div>：

<div class="tile">
    <div class="tileHeader">Tile Name</div>
    <div> <!-- I don't want this -->
        <div class="tileContent">
           <!-- lots of stuff here. -->
        </div>
    <div>
</div>

我怎样才能得到想要的解决方案？

有几个类似的问题，但我发现 none 有解决方案，我的情况略有不同（动态创建的元素）。

Answer 1

你是在告诉它在这一行给出额外的 div：

let $elTileContent = $('<div>).load('tile-content.html #' + tile.name + '-tile')

您需要先使用 class 元素加载元素，然后使用 .prepend 而不是附加 header div 元素，使其堆叠在上方加载的内容 div.

Answer 2

这是因为你在这里自己创造了那个额外的 div:

let $elTileContent = $('<div>').load(...)

您应该加载内容，然后在前面添加 header:

//create the tile and add it to the container
let $elTile = $('<div/>', {
    class: 'tile'
}).appendTo($elContainer);

//create the header but do not add it yet
let $elTileHeader = $('<div/>', {
    class: 'tileHeader',
    html: tile.header
})

//load the content into the tile
$elTile.load('tile-content.html #' + tile.name + '-tile', function(){
    //on the "complete" callback, prepend the header
    $elTile.prepend($elTileHeader);
});

快乐编码:)

从另一个页面追加元素？

Append element from another page?

html

javascript

jquery

jquery-load