В этом руководстве будут описаны методы динамического написания HTML-кода с использованием JavaScript.
Как динамически писать HTML-код с помощью JavaScript?
Чтобы написать HTML-код с помощью JavaScript, используйте следующие методы:
Метод 1: Динамическое написание HTML-кода с использованием метода document.createElement()
JavaScript « документ.createElement() ” метод с “ textContent ” используется для динамического написания HTML-кода в JavaScript. Используя метод createElement(), вы можете создать определенный элемент HTML, а свойство textContent используется для установки текстового содержимого.
Синтаксис
Используйте данный синтаксис для создания элемента HTML в JavaScript:
документ. создатьЭлемент ( 'название тэга' )
Пример
Здесь, во-первых, мы создадим абзац в файле JavaScript, используя HTML-тег
, переданный в « создатьЭлемент() метод:
константа текст знак равно документ. создатьЭлемент ( 'п' ) ;Используйте свойство textContent, чтобы установить текст в абзаце:
текст. textContent знак равно «Добро пожаловать в Линуксхинт» ;
Наконец, распечатайте текст на веб-странице, используя « документ.записать() метод:
документ. записывать ( текст. textContent ) ;Здесь вы можете увидеть в выводе, что мы успешно пишем текст на веб-странице с помощью JavaScript:
Способ 2. Динамическое написание HTML-кода с использованием свойства innerHTML
Для динамического написания HTML-кода используйте JavaScript « внутреннийHTML ' имущество. Это самый простой способ изменить содержимое HTML-элемента. Он поддерживает все браузеры.
Синтаксис
Следуйте указанному синтаксису, чтобы использовать свойство innerHTML:
внутреннийHTML знак равно 'текст'Пример
В файле HTML сначала создайте кнопку, которая будет вызывать определенную функцию « заголовок() ” в JavaScript по событию клика:
< кнопка при нажатии знак равно 'заголовок()' > кликните сюда кнопка >Создайте абзац с помощью тега
, в котором будет отображаться текст из JavaScript, и назначьте ему идентификатор:
< идентификатор p знак равно 'заголовок' > п >Определить функцию заголовок() » в файле JavaScript. Получите ссылку на элемент HTML, используя назначенный ему идентификатор с помощью « получитьэлемент по идентификатору() ” и примените “ внутреннийHTML свойство на нем:
заголовок функции ( ) {документ. получитьэлементбиид ( 'заголовок' ) . внутреннийHTML знак равно '
Добро пожаловать в Linuxhint
' ;}
Вывод
Мы собрали всю необходимую информацию, связанную с динамическим написанием HTML-кода с использованием JavaScript.
Заключение
Чтобы динамически писать HTML-код в JavaScript, используйте « документ.createElement() ” метод с “ textContent имущество или « внутреннийHTML ' имущество. В первом методе вам не нужен какой-либо HTML-код, а в свойстве innerHTML вам нужно получить доступ к HTML-элементу и выполнить над ним операцию. В этом руководстве мы описали методы динамического написания HTML-кода с использованием JavaScript.