Vse, kar morate vedeti o notranjem HTML-ju v JavaScript



Notranji HTML v JavaScript je zelo priročna funkcija in se pogosto uporablja za zagotavljanje bolj dinamičnega in vsestranskega vidika ustvarjenih spletnih strani.

JavaScript je eden najpogosteje uporabljenih programskih jezikov. Prav tako je zelo priljubljen zaradi svoje vsestranskosti na različnih platformah. Obstajajo različne lastnosti v ki vam olajšajo delo pri izdelavi dinamičnega spletnega mesta. V tem članku bomo razpravljali o notranjem HTML-ju v JavaScript v naslednjem zaporedju:

Uvod v JavaScript

JavaScript se uporablja kot odjemalski programski jezik kot tudi programski jezik na strežniški strani. se uporablja za izvedbo tako na strani odjemalca kot na strani strežnika katere koli aplikacije. Vozlišče lahko na več mestih imenujemo tudi Node.js.





Javascript - notranji html v javascriptu - edureka

JavaScript ponuja obilo metod za izvajanje več funkcij z lahkoto. Zaradi tega je JavaScript postal eden izmed najbolj priljubljenih programskih jezikov, poleg tega pa se tudi pogosto uporablja v več vrstah razvoja izdelkov.



Notranji HTML v JavaScript

Notranji lastnost v JavaScript je ena od zelo priročnih funkcij in se pogosto uporablja za zagotavljanje bolj dinamičnega in vsestranskega vidika ustvarjenih spletnih strani.

kako končati program

Če poskušamo preprosto pojasniti notranji HTML, potem je delo, ki ga opravi notranji HTML, preprosto nalaganje vsebine strani, ne da bi osvežili celotno stran. To prihrani uporabo podatkov in čas za nalaganjem strani in je zelo enostavno pridobiti. To daje uporabniku zelo hiter in odziven občutek, s čimer je uporabniška izkušnja veliko boljša.

Morda se sliši nekoliko težko, vendar poskusimo to razumeti s pomočjo primera.



Primer:

 

Kliknite tukaj, če želite spremeniti notranje besedilo HTML.

funkcija myFunction () {document.getElementById ('odstavek1'). innerHTML = 'Odstavek spremenjen!' }

Tu v zgornji kodi je v oznaki odstavka ID tega odstavek1.

Obstaja funkcijo poimenoval myfunction (), ki bi bil preklican s klikom na besedilo “Kliknite tukaj, če želite spremeniti besedilo innerHTML”.Ko je funkcija preklicana s klikom, se izvede funkcija, ki pravi getElementById ('odstavek1'), ki je navedel, da je element z Id-jem izbran kot predstavitev.

Poleg tega imamo funkcijo innerHTML, ki po kliku preprosto pomeni, kaj je treba storiti. Tu v zgornjem primeru je preprosto 'Odstavek spremenjen'.

Spodaj je začetni izhod zgornje kode.

Spodaj je spremenjen izhod po kliku.

Notranji HTML z urejenim ali neurejenim seznamom

Spodaj je prikazan primer uporabe innerHTML z urejenim ali neurejenim seznamom.

Primer:

 
  • zdravo
  • Pozdravljeni še enkrat

Kliknite spodnji gumb, da dobite vsebino elementa ul.

Poskusite funkcijo helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}

Tu se notranji HTML sproži z gumbom, definiranim z imenom »Poskusi«.

Začetni rezultat zgornjega besedila je:

mešanje podatkov tabele levo pridruži

Izhod po kliku na gumb. Klik na gumb ne privede do ponovnega nalaganja strani, ampak je bil posledica uporabe innerHTML.

InnerHTML za spreminjanje URL-ja

Spodaj je še en primer, ki prikazuje uporabo innerHTML za spreminjanje URL-ja s klikom na gumb.

Primer:

  Wikipedija Spremeni funkcijo povezave myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}

Zgornji primer sprva daje povezavo do spletnega mesta Wikipedia, ko pa kliknete gumb, se povezava spremeni v Google.

Obstaja več takih operacij, pri katerih pride v poštev innerHTML, ko strani ni treba znova naložiti in posodobiti le del.To prihrani čas in manj napora za pristop.Največja prednost innerHTML je uporabniška izkušnja, ki je izboljšana s to funkcijo.

Oglejte si avtor Edureka. Izobraževanje za certificiranje spletnega razvoja vam bo pomagalo Naučiti se ustvariti impresivna spletna mesta z uporabo API-jev HTML5, CSS3, Twitter Bootstrap 3, jQuery in Google ter jih razporediti na Amazon Simple Storage Service (S3).

Imate vprašanje za nas? Prosimo, navedite ga v oddelku za komentarje v »Združevanje nizov v JavaScript« in mi se vam bomo oglasili.