通过Javascript附加/链接HTML文件

Question

我一直在寻找一种从另一个HTML文件(保存在本地(插入HTML的方法 - 但没有Jquery或其他库很重要。基本上我试图做的是从这个重构：

第一种方法(正在工作(

public setForm(): void {
this.appDiv.innerHTML = `<form id="registerForm">
<h1 class="h3 mb-3 font-weight-normal">Please sign up</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control mt-1" placeholder="Password" required="">
<button id="registerButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>`;
}

像这样：

重构版本

public setForm(): void {
this.appDiv.innerHTML = document.insertFromPath('./views/register-panel.html').innerHTML;
}

我为什么要这样做？

不仅如此，代码看起来更干净。它允许我封装 logik，每个文件都有自己的"责任"。Javascript文件往往会变得混乱^^

Answer 1

您可以使用对象标签。

<object data="/views/register-panel.html"> 
Your browser doesn’t support the object tag. 
</object>

注意：我使用了您提供的文件路径。请通过检查项目结构来确保您的文件路径正确。

Answer 2

尝试此解决方案并使用your ID而不是content

function setForm() {
document.getElementById("content").innerHTML='<object type="text/html" data="/views/register-panel.html" ></object>';
}

Answer 3

如果你想让你的.js更干净，你可以在你的html中设置一个模板，并与Javascript一起使用。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template