[英]Append/Link HTML file via Javascript
我一直在尋找從另一個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文件往往會變得凌亂。^^
您可以使用對象標簽。
<object data="/views/register-panel.html">
Your browser doesn’t support the object tag.
</object>
注意:我使用了您提供的文件路徑。 請通過檢查項目結構來確保文件路徑正確。
嘗試此解決方案,並使用your ID
代替content
function setForm() {
document.getElementById("content").innerHTML='<object type="text/html" data="/views/register-panel.html" ></object>';
}
如果您想使.js更加整潔,則可以在html中設置模板,並使用Javascript進行使用。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.