gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 00:21:35 29 4
gpt4 key购买 nike

我想通过使用 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()”行。如果我将其注释掉,则会收到错误:“Uncaught TypeError: Cannot read property 'contains' of null”,位于 $("body").append(b) 行。这是怎么回事?

最佳答案

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

您遇到的错误是由于将非 DOM 元素附加到 HTML 正文而引起的,因此如果您 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())
})

关于javascript - 使用 jQuery 从单独文件中的模板加载 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60373429/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com