题意：一个自包含的JavaScript/HTML模块 - 这可能吗？
问题背景：
[EDIT: I have possibly found another solution. Kooilnc's solution looks good. Is the solution at the bottom of this question better or worse than Kooilnc's?]
[编辑：我可能找到了解决方案。Kooilnc的解决方案看起来不错。这个问题底部的解决方案比Kooilnc的更好还是更差？]
I have a div with associated javascript code. I would like to have the html for just this div and the associated javascript code all in one file, a kind of self contained 'module', eg
我有一个 div 和相关的 JavaScript 代码。我希望将这个 div 的 HTML 和相关的 JavaScript 代码都放在一个文件中，形成一种自包含的“模块”，例如：
mydiv.html
<html>
<div id="Wibble" style="display: none;">
... loads of structure for just this div
</div>
<script type="text/javascript">
... loads of js functions just associated with this div
</script>
</html>
Then in my main page index.html I would like to include this 'module' in some way.
然后在我的主页面 `index.html` 中，我想以某种方式包含这个“模块”。
The only thing I have found is a Server Side Include:
我找到的唯一方法是服务器端包含：
index.html
<!DOCTYPE html>
<html>
<head>
... loads of stuff
</head>
<body>
... loads of other html structure
<!--#include FILE="mydiv.html" -->
... loads of other html structure and script tags
</body>
</html>
Question 1: Is there a better way of doing this? 问题1：有没有更好的方法来做到这一点？
Question 2: Should I have the html tag in mydiv.html as that will obviously put an html tag in index.html which is out of place?
问题2：我应该在mydiv.html中包含html标签吗？因为这显然会在index.html中放入一个不合适的html标签。
Question 3: If that html tag in Q2 should not be there, how do I write the mydiv.html file so it has all the formatting and nice coloured structure in Visual Studio Code?
问题3：如果在问题2中不应该有那个html标签，我该如何编写mydiv.html文件，以便在Visual Studio Code中拥有所有的格式和漂亮的颜色结构？
Edit:
Kooilnc's solution (below in the answers) looks good. Here is another solution I have found. It is working in my development environment Visual Studio Code. I need the javascript in my included html file in body's onload. Does anyone know if this solution will work on a server with my body onload requirement? Is it better or worse than Kooilnc's solution?
Kooilnc的解决方案（在下面的回答中）看起来不错。这里是我找到的另一种解决方案。它在我的开发环境Visual Studio Code中有效。我需要在包含的html文件中的`body`的`onload`中运行javascript。有没有人知道这个解决方案是否能满足我对服务器的`body onload`要求？它比Kooilnc的解决方案更好还是更差？
Jquery must be included with the normal <script> tag prior to this.
jQuery必须在此之前使用普通的 `<script>` 标签包含。
I insert this code within index.html
我将此代码插入到 `index.html` 中。
<!DOCTYPE html>
<html>
<head>
... loads of stuff
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</head>
<body>
... loads of other html structure
<div id="include_mydiv"></div>
<script>
$(function(){
$("#include_mydiv").load("mydiv.html");
});
</script>
... loads of other html structure and script tags
</body>
</html>
And mydiv.html did not have any <html> tags:
`mydiv.html` 中没有任何 `<html>` 标签。
<div id="Wibble" style="display: none;">
... loads of structure for just this div
</div>
<script type="text/javascript">
... loads of js functions just associated with this div
</script>
问题解决：
You can try importing from template elements. Here is a simplified templating example that may be useful.
您可以尝试从模板元素导入。以下是一个可能有用的简化模板示例。
If you need to import from an external file, check this example I cooked up for you.
如果您需要从外部文件导入，请查看我为您准备的这个示例。
document.querySelectorAll(`[data-import]`).forEach( el => {
if (!el.dataset.imported) {
el.appendChild(document.querySelector(`#${el.dataset.import}`)
.content.cloneNode(true));
el.dataset.imported = `ok`;
}
});<template id="someForm">
<script>
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.nodeName === `BUTTON`) {
alert(`Yes. I am handled`);
}
}
</script>
<button id="sub">Handle me!</button>
</template>
<template id="somethingElse">
<style type="text/css">
.red {color: red;}
</style>
<p class="red">I am appended too</p>
</template>
<div data-import="someForm"></div>
<div data-import="somethingElse"></div>
