Този урок ще опише методите за динамично писане на HTML код с помощта на JavaScript.
Как да напишем HTML код динамично с помощта на JavaScript?
За да напишете HTML код с помощта на JavaScript, използвайте следните методи:
Метод 1: Напишете динамично HTML код с помощта на метода document.createElement().
на JavaScript „ document.createElement() ' метод с ' textContent ” се използва за динамично писане на HTML код в JavaScript. С помощта на метода createElement() можете да създадете определен HTML елемент, а свойството textContent се използва за задаване на текстовото съдържание.
Синтаксис
Използвайте дадения синтаксис, за да създадете HTML елемент в JavaScript:
документ. createElement ( 'tagName' )
Пример
Тук, първо, ще създадем абзац в JavaScript файл, като използваме HTML
тага, предаден в „ createElement() ” метод:
конст текст = документ. createElement ( 'p' ) ;Използвайте свойството textContent, за да зададете текста в абзац:
текст. textContent = „Добре дошли в Linuxhint“ ;
Накрая отпечатайте текста на уеб страницата, като използвате „ document.write() ” метод:
документ. пишете ( текст. textContent ) ;Тук можете да видите в резултата, че успешно пишем текста на уеб страницата с помощта на JavaScript:
Метод 2: Пишете динамично HTML код, като използвате свойството innerHTML
За да пишете динамично HTML код, използвайте JavaScript “ innerHTML ' Имот. Това е най-простият подход за промяна на съдържанието на HTML елемент. Поддържа всички браузъри.
Синтаксис
Следвайте дадения синтаксис, за да използвате свойството innerHTML:
innerHTML = 'текст'Пример
В HTML файла първо създайте бутон, който ще извика дефинираната функция „ заглавие() ” в JavaScript на събитието кликване:
< бутон при щракване = 'заглавие()' > Натисни тук бутон >Създайте абзац с помощта на
таг, където текстът ще бъде показан от JavaScript и му присвоете идентификатор:
< p id = 'заглавие' > стр >Дефинирайте функция ' заглавие() ” в JavaScript файл. Вземете референцията на HTML елемента, като използвате присвоения му идентификатор с помощта на „ getElementById() ' и приложете ' innerHTML ” собственост върху него:
функционално заглавие ( ) {документ. getElementById ( 'заглавие' ) . innerHTML = „
Добре дошли в Linuxhint
“ ;}
Изход
Събрахме цялата съществена информация, свързана с динамичното писане на HTML код с помощта на JavaScript.
Заключение
За да пишете динамично HTML код в JavaScript, използвайте „ document.createElement() ' метод с ' textContent ” собственост или „ innerHTML ' Имот. При първия метод нямате нужда от HTML код, докато в свойството innerHTML трябва да получите достъп до HTML елемента и да извършите операция върху него. В този урок описахме методите за динамично писане на HTML код с помощта на JavaScript.