In this article we are going to discuss how to add a new element to HTML DOM in JavaScript. The Document object provides a method createElement() to create an element and appendChild() method to add it to the HTML DOM. Following are the steps involved in creating HTML DOM − Step 1 − To insert an element into HTML DOM, firstly, we need to create an element and append to HTML DOM. The document.createElement() is used to create the HTML element. The syntax to create an element is shown below. document.createElement(tagName[, options]); Where, tagName is the name of ... Read More

The HTML DOM option Object represent the element of an HTML document.Let us now see how to create option object −SyntaxFollowing is the syntax −document.createElement(“OPTION”);PropertiesFollowing are the properties of option Object −PropertyExplanationdisabledIt returns and modify whether the option element is disabled or not.defaultSelectedIt returns the default value of option element in an HTML document.formIt returns the reference of the form that contain the option element in HTML document.indexIt returns and modify the index position of an option in the HTML document.labelIt returns and alter the value of the label attribute of an option in an HTML document.selectedIt returns and ... Read More

The HTML DOM select remove() method removes a new option from a drop-down list in an HTML document.SyntaxFollowing is the syntax −object.remove(index)Here, index represents the index of the option which is to be removed from the drop-down list.ExampleLet us see an example of HTML DOM select remove() method − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }   ... Read More

The HTML DOM select add() method adds a new option to a drop-down list in an HTML document.SyntaxFollowing is the syntax −object.add(option, index)ExampleLet us see an example of HTML DOM select add() method − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    }    .drop-down{     ... Read More

The HTML DOM select selectedIndex property returns and modify the index of selected option of the drop-down list in an HTML document.SyntaxFollowing is the syntax −Returning selectedIndexobject.selectedIndexModifying selectedIndexobject.selectedIndex = “number”ExampleLet us see an example of HTML DOM select selectedIndex property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       ... Read More

The HTML DOM select autofocus property returns and modify whether the drop-down list should get focused or not when page load.SyntaxFollowing is the syntax −1. Returning autofocusobject.autofocusModifying autofocusobject.autofocus = true | falseExampleLet us see an example of HTML DOM select autofocus property − Live Demo HTML DOM autofocus property    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100vh;    }    p{       font-weight:700;       font-size:1.1rem;   ... Read More

The HTML DOM select form property returns the reference of the form that contain the drop-down list.SyntaxFollowing is the syntax −object.formExampleLet us see an example of HTML DOM select form property − Live Demo    body{       text-align:center;       background-color:#363946;       color:#fff;    }    form{       margin:2.5rem auto;       border:1px solid #fff;       padding:2rem;    }    .drop-down{       display:block;       width:35%;       border:2px solid #fff;       font-weight:bold;       padding:2px;       margin:1rem auto; ... Read More

The HTML DOM Input Date step property determines the legal day intervals to choose from when user opens the calendar. It sets or returns the input date step attribute value.SyntaxFollowing is the syntax −Returning number valueinputDateObject.stepSetting value attribute to a number valueinputDateObject.step = numberExampleLet us see an example of Input Date step property − Live Demo Input Date required Odd Days Calendar:    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    divDisplay.textContent = 'Current step: '+inputDate.step; OutputThis will produce the following output. Here, step was set to 2 −

The HTML DOM Input Date required property determines whether Input date is compulsory to set or not.SyntaxFollowing is the syntax −Returning boolean value - true/falseinputDateObject.requiredSetting required to booleanValueinputDateObject.required = booleanValueBoolean ValuesHere, “booleanValue” can be the following −booleanValueDetailstrueIt defines that it is compulsory to set the date field to submit form.falseIt is the default value and to set date field is not compulsory.ExampleLet us see an example of Input Date required property − Live Demo Input Date required Name:  Date of Birth:  Confirm    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    function submit() {   ... Read More

The HTML DOM Input Date readOnly property sets/returns whether Input Date can be modified or not.SyntaxFollowing is the syntax −Returning boolean value - true/falseinputDateObject.readOnlySetting readOnly to booleanValueinputDateObject.readOnly = booleanValueBoolean ValuesHere, “booleanValue” can be the following −booleanValueDetailstrueIt defines that the input date is readOnly.falseIt defines that the input date is not readOnly and can be modified.ExampleLet us see an example of Input Date readOnly property − Live Demo Input Date readOnly Final Exam Date: Confirm Date    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    divDisplay.textContent = 'Exam Date Finalized: '+inputDate.readOnly;   ... Read More