如何向新创建的HTML元素添加列表ID？

Question

How do I dynamically add text inputs to a table while assigning the same list id? My code is currently:

function addspeakers(){
    for(j=0; j<10;j++){
    var cellid='inp'+cellnum;
    input=document.getElementById('sprow').appendChild(document.createElement('input'));
    input.placeholder='Country '+cellnum;
    input.id='inp'+cellnum;
    // add to list input.addtolist(countries);
    cellnum++;
    }
return
}

all it does is add 10 text inputs to a list however these lists have drop down menus... This is the code for the datalist:

<datalist id='countries'>

and the text input elements should be created looking like this:

<table id='splist'>
  <tr>
    <td id='sprow'>
      <input list='countries' placeholder='Country 1' id='inp1'>
    </td>
  </tr>
</table>

What do I need to add it to the list id?

Answer 1

You simply need to assign it like your other variables:

input.list='countries';

Also, you never use cellid , and your return is unnecessary ;)

Hope this helps!

Answer 2

Use setAttribute to set the property on the element.

input.setAttribute('list', 'countries');

Also since list is a not a default attribute of the element, but a custom attribute.

You can use data-* ( which is custom attributes)

<input data-list='countries'

input.setAttribute('data-list', 'countries');