Javascript Innerhtml

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

U moet weten hoe u de tekst of HTML op de pagina kunt wijzigen om uw sites interactiever te maken. Dit is waar de HTML innerText en innerHTML attributen van pas komen.

Deze attributen maken het gemakkelijk om de tekst van een DOM-element en zijn HTML-code te wijzigen . In deze handleiding leert u hoe u de JavaScript-kenmerken innerText en innerHTML gebruikt.

Wat is JavaScript innerHTML?

De eigenschap innerHTML JavaScript definieert de HTML-inhoud van een element op een webpagina. InnerHTML is een eigenschap van de HTML DOM. innerHTML wordt vaak gebruikt voor het definiëren en wijzigen van de inhoud van een

element

U kunt innerHTML als volgt gebruiken: ..

document.getElementById ("paragraaf") innerHTML = " Karma-carrière!";

Deze regel code definieert de inhoud van het "paragraaf"

element voor "Karma-carrière"! De getElementById () methode haalt een element op aan de hand van zijn ID.

De browser stelt een href = "/ what-is-the-javascript-dom /" > Object Model (DOM) document wanneer een pagina wordt geladen. Deze DOM is een reeks objecten die op de pagina wordt weergegeven.

De DOM betekent dat u de HTML-code niet telkens hoeft te wijzigen als u een webelement wilt wijzigen. U kunt de DOM en JavaScript gebruiken om de manier waarop de pagina wordt weergegeven in een bepaalde sessie te wijzigen

Wat is JavaScript innerText?

De JavaScript innerT ext eigenschap definieert de tekstinhoud van een element. Het definieert ook de inhoud van zijn nakomelingen. Afstammelingen kunnen -tags in een alinea opnemen

De syntaxis van innerText is vergelijkbaar met die van innerHTML: ..

document.getElementById ("element") InnerText = "Dit is een test. & Rdquo ;;

zet de tekstwaarde van het element met id "element" op "Dit is een test."

U kunt deze methoden testen door naar uw JavaScript-console en selecteer een element om te wijzigen:

Dit verandert de inhoud van de eerste HTML

tag op een webpagina. Als u de tekst wilt vervangen, kunt u het kenmerk innerText gebruiken:.

wijzigt de inhoud van de tweede alinea (aangegeven door het cijfer 1) op de pagina "Dit is een toets." "

Laten we beginnen met het wijzigen van de tekst op een webpagina. We gaan een eenvoudige webpagina maken met flashcards. Deze webpagina zal een vraag over HTML weergeven. Het zal een knop hebben die, wanneer erop wordt geklikt , zal het antwoord op een HTML-vraag onthullen.

Maak een webpagina

Onze eerste stap is het maken van een index.html-bestand voor onze forward: