Javascript 使用jQuery将HTML元素从模板加载到单独的文件中_Javascript_Jquery_Html

Javascript 使用jQuery将HTML元素从模板加载到单独的文件中

javascript jquery html

Javascript 使用jQuery将HTML元素从模板加载到单独的文件中,javascript,jquery,html,Javascript,Jquery,Html,我想通过使用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> <

我想通过使用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>

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

template.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>

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


苹果
香蕉

当我加载index.html时，将template.html中的par1加载到主体中，并呈现单词apple。这就是我想要的，但是我不明白为什么我需要app.js中的行“a.html（）”。如果我将其注释掉，就会得到错误：“uncaughttypeerror:cannotreadproperty'contains'of null”，位于

$（“body”）。append（b）

。这是怎么回事？

你确定

a.html（）

不是将“苹果”呈现给身体的那个吗

我在这里试过这个：

而且

$（data.contents（）.clone（）

似乎不起作用（因此，b是空的）<代码>$（数据）.clone（）在另一方面起作用。

除了返回的列表

contents（）

可能不是您可以找到的东西以外，我没有明确的答案。

除了代码中的对和错之外，下面是对代码中发生了什么的解释

您遇到的错误是由于在HTML正文中附加了none DOM元素引起的，因此如果您

console.log（b，typeof b）

它将记录以下内容：

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

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

所以这里发生的是您的代码，

let a=$（data.contents（）.clone（）

将创建HTML标记的javascript对象数组，并将其分配给

变量，然后保存对数组元素的引用，该数组元素的ID为par1
。它仍然是一个javascript对象
，因此当您调用a.html（）时，它会将所有a
元素转换为文本和DOM
元素，b
变量包含对其中一个html元素的引用，这就是为什么您的代码需要a.html（），或者您也可以像下面这样拥有它：
k.fn.init [p#par1, prevObject: k.fn.init(3)] "object"

$.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如何处理变量以及函数如何工作。