Deze zelfstudie beschrijft de methoden om HTML-code dynamisch te schrijven met behulp van JavaScript.
Hoe HTML-code dynamisch te schrijven met behulp van JavaScript?
Gebruik de volgende methoden om HTML-code met JavaScript te schrijven:
Methode 1: HTML-code dynamisch schrijven met de methode document.createElement().
JavaScript's ' document.createElement() ” methode met de “ tekstInhoud ” eigenschap wordt gebruikt om dynamisch een HTML-code in JavaScript te schrijven. Met de methode createElement() kunt u een bepaald HTML-element maken en wordt de eigenschap textContent gebruikt om de tekstinhoud in te stellen.
Syntaxis
Gebruik de gegeven syntaxis om een HTML-element in JavaScript te maken:
document. createElement ( 'tagNaam' )
Voorbeeld
Hier maken we eerst een alinea in een JavaScript-bestand met behulp van de HTML
-tag die is doorgegeven in een ' createElement() ” methode:
const tekst = document. createElement ( 'p' ) ;Gebruik de eigenschap textContent om de tekst in een alinea in te stellen:
tekst. tekstInhoud = 'Welkom bij Linuxhint' ;
Druk ten slotte de tekst op de webpagina af met behulp van de ' document.write() ” methode:
document. schrijven ( tekst. tekstInhoud ) ;Hier kunt u in de uitvoer zien dat we met succes de tekst op de webpagina hebben geschreven met behulp van JavaScript:
Methode 2: HTML-code dynamisch schrijven met de eigenschap innerHTML
Gebruik JavaScript om HTML-code dynamisch te schrijven ' binnenHTML ' eigenschap. Het is de eenvoudigste manier om de inhoud van een HTML-element te wijzigen. Het ondersteunt alle browsers.
Syntaxis
Volg de gegeven syntaxis om de eigenschap innerHTML te gebruiken:
binnenHTML = 'tekst'Voorbeeld
Maak in het HTML-bestand eerst een knop die de gedefinieerde functie ' kop() ” in JavaScript op de klikgebeurtenis:
< knop opklik = 'kop()' > Klik hier knop >Maak een alinea met de tag
waar de tekst uit JavaScript wordt weergegeven en wijs er een id aan toe:
< p id = 'kop' > p >Definieer een functie “ kop() ” in een JavaScript-bestand. Verkrijg de referentie van het HTML-element met behulp van de toegewezen id met behulp van de ' getElementById() ' methode en pas een ' binnenHTML eigendom erop:
functie kop ( ) {document. getElementById ( 'rubriek' ) . binnenHTML = '
Welkom bij Linuxhint
' ;}
Uitgang
We hebben alle essentiële informatie verzameld met betrekking tot het dynamisch schrijven van de HTML-code met behulp van JavaScript.
Conclusie
Om HTML-code dynamisch in JavaScript te schrijven, gebruikt u de ' document.createElement() ” methode met de “ tekstInhoud ' eigendom of de ' binnenHTML ' eigenschap. Bij de eerste methode heeft u geen HTML-code nodig, terwijl u in de eigenschap innerHTML toegang moet hebben tot het HTML-element en er een bewerking op moet uitvoeren. In deze zelfstudie hebben we de methoden beschreven om HTML-code dynamisch te schrijven met behulp van JavaScript.