Вызывает кучу HTML в плохой практике JS?

Question

Вот что я пытаюсь сделать:

Я делаю несколько вещей, на мой ввод текста с помощью "oninput=myFunction()"

Когда я начинаю набирать Я хотел сделать несколько вещей:

У меня есть функция removing a few elements и adding a textNode already, однако мне нужно добавить 35-40 lines of HTML.

Будет ли это плохо делать?

Я не совсем уверен, как я должен настроить его, чтобы называть этот HTML-код еще функцией.

Какой лучший/самый чистый способ сделать это?

Должен ли я просто хранить HTML, завернутый в hidden display:none class, и добавить ли функцию видимый класс?

Я чувствую, что это не лучший метод, вот почему я здесь прошу!

Любые советы приветствуются. Я печатаю на своем телефоне, так что извините, если я не очень ясно понял.

Answer 1

Лучший способ, по моему мнению, иметь скрипт, который добавит обработчик событий после того, как элемент будет готов (после загрузки страницы). Эта функция должна заботиться о создании и удалении любого элемента, который является частью сценария «на лету».

Выполнение этого документа гарантирует, что ваш HTML-код будет чистым и что JavaScript будет выполнять то, за что он несет ответственность. Существуют хорошие способы создания HTML с JavaScript с использованием таких методов, как document.createElement и document.createTextNode. Когда ваши элементы будут созданы, вы можете добавить их в правильные позиции.

Чтобы получить лучший рендеринг во всех браузерах, обычно рекомендуется создавать свои элементы display: none, прежде чем все будет готово для отображения.