Добавить / связать HTML-файл через Javascript

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;
}

Почему я хочу это сделать?

Мало того, что код выглядит чище. Это позволяет мне инкапсулировать логик, и каждый файл имеет свою «ответственность». Файлы Javascript имеют тенденцию запутываться. ^^

Answer 1

Если вы хотите сделать ваш .js чище, вы можете установить шаблон в своем html и использовать его с Javascript.

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

Answer 2

Попробуйте это решение и используйте your ID вместо content

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

Answer 3

Вы можете использовать тег object .

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

ПРИМЕЧАНИЕ: Я использовал предоставленный вами путь к файлу. Убедитесь, что ваш путь к файлу указан правильно, проверив структуру вашего проекта.