InnerHTML returning [object HTMLOptionElement]

Question

I am trying to create a function to put options inside a select through the classes of these selects.

function selectOptionsClass(selectClass, arrayOptions) {
  let selects = document.querySelectorAll("." + selectClass);

  for (let i = 0; i < arrayOptions.length; i++) {
    let option = document.createElement("option");
    option.value = arrayOptions[i];
    option.text = arrayOptions[i];

    selects.forEach(select => {
      select.innerHTML += `${option}`;
      console.log(select);
    });   
  }
}

let testeOptions = [0, 10, 20];
selectOptionsClass('select-teste', testeOptions);

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Teste</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  
</head>
<body>
  <div class="form-group col-2">
    <label for="teste">Teste</label>
    <select name="teste" id="teste" class="form-control select-teste" required></select>
   </div>
   <div class="form-group col-2">
    <label for="teste">Teste</label>
    <select name="teste" id="teste" class="form-control select-teste" required></select>
   </div>
   <div class="form-group col-2">
    <label for="teste">Teste</label>
    <select name="teste" id="teste" class="form-control select-teste" required></select>
   </div>
</body>
</html>

But the function is returning an [object HTMLOptionElement] inside select, not the object element I'd like.

Can someone help me? Thank you!

Possible duplicate of ["innerHTML += ..." vs "appendChild(txtNode)"](https://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode) — Tigger, Sep 04 '19 at 23:36

score 1 · Answer 1 · answered Sep 04 '19 at 23:29

You're trying to treat an HTML Object in JavaScript like you would a string with this..

select.innerHTML += `${option}`;

You should try something like.

select.appendChild(option)

This actually adds the option as a DOM element as a child of the select.

Tigger · Answer 2 · 2019-09-05T00:30:15.730

Edit: Looping over the selectClass, then the arrayOptions and using appendChild instead of using innerHTML resolves the issues.

innerHTML treats a "string" as if it was predefined HTML, but as you are creating an element, you need to use appendChild instead.

From “innerHTML += …” vs “appendChild(txtNode)” : Setting innerHTML does indeed invalidate any references to elements within the target element you may be holding -- because those elements don't exist anymore, you removed them and then put in new ones (that look very similar) when you set innerHTML.

function selectOptionsClass(selectClass, arrayOptions) {
  let selects = document.querySelectorAll("." + selectClass);
  let option;
  
  selects.forEach(select => {
    arrayOptions.forEach(opt => {
      option = document.createElement("option");
      option.value = opt;
      option.text = opt;
      select.appendChild(option);
    });
  });
}
let testeOptions = [0, 10, 20];
selectOptionsClass('select-teste', testeOptions);

<label for="teste">Teste</label>
<select name="teste1" id="teste1" class="form-control select-teste" required></select>
<label for="teste">Teste</label>
<select name="teste2" id="teste2" class="form-control select-teste" required></select>
<label for="teste">Teste</label>
<select name="teste3" id="teste3" class="form-control select-teste" required></select>

But the appendchild will only add in one "child", the rest will eliminate. I believe that in this situation that I need to add in all will not help — Julio, Sep 04 '19 at 23:46
@Julio : See updated answer. Heading out for hours, so I will not be able to reply for a while. — Tigger, Sep 05 '19 at 00:31

InnerHTML returning [object HTMLOptionElement]

2 Answers2