使用 jQuery 在单独的文件中从模板加载 HTML 元素答案

【问题标题】：Loading HTML elements from template in separate file with jQuery使用 jQuery 在单独的文件中从模板加载 HTML 元素
【发布时间】：2020-02-24 10:01:02
【问题描述】：

我想通过使用 jQuery 从一个单独的文件中加载 HTML 元素来构建一个网页。

我拥有的文件：

index.html

   <!DOCTYPE html>
   <html lang="en">
   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
     <script src="app.js"></script>
   </body>
   </html>

app.js

$.get("template.html",function(data) {
    let a = $(data).contents().clone()
    let b = a.find("#par1")
    a.html()
    $("body").append(b)   
 })

template.html

<template>       
    <div>
      <p id="par1">apple</p>
      <p id="par2">banana</p>
    </div>    
</template>

当我加载 index.html 时，来自 template.html 的 par1 被加载到正文中，并呈现了单词 apple。这就是我想要的，但我不明白为什么我需要 app.js 中的“a.html()”行。如果我将其注释掉，我会在$("body").append(b) 所在的行收到错误：“未捕获的 TypeError：无法读取属性 'contains' of null”。这是怎么回事？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

除了代码中的正确和错误之外，这里还解释了代码中发生的情况。

您遇到的错误是由于在 HTML 正文中附加了一个无 DOM 元素引起的，所以如果您 console.log(b, typeof b) 它会记录以下内容：

k.fn.init [p#par1, prevObject: k.fn.init(3)] "object"

所以这里发生的事情是您的代码let a = $(data).contents().clone(); 将创建您的 HTML 标记的 javascript 对象数组，并将其分配给 a 变量，然后您持有对数组元素的引用，其中包含编号par1。它仍然是一个 javascript Object，因此当您调用 a.html() 时，它会将所有 a 元素转换为 Text 和 DOM 元素，并且 b 变量持有对其中一个 HTML 元素的引用，这就是为什么你的代码需要 a.html() 或者你也可以像下面这样：

$.get("template.html",function(data) {
    let a = $(data).contents().clone();
    let b = a.find("#par1")
    $("body").append(b.html())   
 })

【讨论】：

谢谢，这行得通。我仍然不明白为什么 a.html() 会修改 a 。文档声明它返回变量的 html 内容。我是 javascript 新手，所以也许这就是它做事的方式？
我相信这更多的是 javascript 如何处理变量以及contents()、clone() 函数的工作原理。

【解决方案2】：

您确定a.html() 不是将“苹果”呈现给身体的那个吗？

我在这里试过这个：https://codepen.io/BenKennish/pen/BtwEn

$(data).contents().clone() 似乎不起作用（因此，b 为空）。另一方面，$(data).clone() 有效。

除了contents() 返回的列表可能不是您可以在find() 上使用的东西之外，我对您的问题没有明确的答案。

【讨论】：