时间戳

首页 > 解决方案 > 使用 jQuery 在单独的文件中从模板加载 HTML 元素

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

问题描述

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

我有的文件：

索引.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>

应用程序.js

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

模板.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). 这里发生了什么？

标签： javascriptjqueryhtml

解决方案

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

您遇到的错误是由于在 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变量，然后您持有对其中具有 ID 的数组元素的引用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())   
 })

推荐阅读