skapa ett HTML-Alternativelement med JavaScript-alternativet() Constructor

det lilla kända JavaScript-alternativet () constructor låter dig undvika den verbose syntaxen för att skapa DOM-element

vi älskar alla jQuery. Bland de många fantastiska egenskaperna i detta bibliotek är möjligheten att enkelt skapa DOM-element och placera dem i dokumentet utan den normalt verbala syntaxen för inbyggt JavaScript.

men det finns en lite känd funktion i JavaScript som låter dig skapa alternativelement med ganska minimal ansträngning. Denna funktion är alternativet () konstruktör. Syntaxen är enkel:

  1. få en referens till ett formulärelement
  2. Instantiera konstruktören och associera det returnerade objektet med formulärelementet
  3. under instantiering, skicka in följande argument: 1) texten som visas på sidan , 2) värdet på kontrollen , 3) om det är standardvalet och om det är valt

exempel # 1

i Exempel # 1 har vi en enkel form som innehåller en select-kontroll. I markeringen finns tre alternativ: ”måndag”, ”tisdag” och ”onsdag”. När JavaScript körs sker följande åtgärder:

  1. vi får en hänvisning till select controls (”w”)
  2. vi tar bort alla alternativelementen (w.length = 0)
  3. vi skapar en array med objekt, var och en med två egenskaper (”d”)
  4. vi slingrar genom arrayen och för varje arrayelement skapar vi dynamiskt ett nytt select-element med hjälp av objektets ”text” och ”val” – egenskaper. I varje fall betyder de två sista argumenten: ”false”,”false” att det här nya elementet inte kommer att vara standard, och det kommer inte heller att väljas.

och det är det!

sammanfattning

det lilla kända alternativet() konstruktören kan användas för att skapa nya HTML-alternativelement. Så, beroende på hur du väljer att närma sig detta, kan du skriva en ganska effektiv kod som sidsteg den normalt verbose syntaxen i dokumentet.createTextNode (), dokument.createElement () och dokument.appendChild () metoder.

användbara länkar för JavaScript-alternativet () konstruktör

Lämna ett svar

Din e-postadress kommer inte publiceras.

More: