Question

我需要为移动用户显示很多元素，并计划将所有内容包装在template中，然后选择我想要的特定div并将其附加到body。

为什么下面的代码没有像我通常期望的那样将div附加到body上？我没有用其他SO问题中最基本的例子。

<template id="template">
    <div id="page1">page1</div>
    <div id="page2">page2</div>
</template>

然后是jQuery：

function change_page(page_id){
    var target = "#"+page_id;
    var clone = $("#template").html();
    $("body").append(clone.find(target));
}

Answer 1

$(clone).find('whatever');

只要clone包含html，并且whatever是该html中元素的有效选择器，您就可以通过这种方式找到元素。关键是您必须首先将html解析为dom元素，$(html)会这样做。

var template = $('#template').html();
$( document.body ).append( $(template).filter('#page2') );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="template">
<div id="page1">page1</div>
<div id="page2">page2</div>
</template>

但是，鉴于模板的顶层有两个元素，在这种情况下，您必须使用filter()而不是find()。

在HTML模板中选择元素并附加到正文

1 个答案: