# JS syntax - HTML elements
[[JS Syntax]]
## HTML elements
https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_build_custom_form_controls
### constructing elements
add text inside an element
```js
element.innerText += "text"
```
add html inside an element
```js
element.innerHtml += "<a href = "/">link</a>"
```
you can also add `innerHtml` and `outerHtml`
add an element inside another element
```js
element.appendChild(child)
```
### input
#### buttons
```js
let btn = this.container.createEl('button');
```
#### dropdown lists
creating the input selector element:
```js
let list = this.container.createEl('select');
list.className = "dropdown";
```
adding options to the list
```js
let option = this.container.createEl('option');
option.text = "text"
option.value = "value"
list.appendChild(option);
```
the text is what is displayed on the list, the value can be a variable that it corresponds to
controlling the list selection
```js
list.selectedIndex = 0
```
this will set the default/starting selected option
getting the selected value
```js
list[list.selectedIndex].value
```
##### test code block
```dataviewjs
const numberDropdown = (start,end,selected) => {
let list = this.container.createEl('select');
list.className = "dropdown";
for (var i = start +1; i < end + 1; i++)
{
let option = this.container.createEl('option');
option.text = String(i);
option.value = i;
list.appendChild(option);
}
list.selectedIndex = selected + 1;
return list;
}
numberDropdown(0,5,2)
```