setAttribute the only option to set list = <id datalist> in input element?

Question

I cannot set the list property of an <input> element. sel.list = id is not working in my code.

var sel = document.createElement("input");
sel.type = "text";
sel.id = "inputSelectName";
sel.list = "inputNamesList"; // Does not work.
//sel.setAttribute("list", "inputNamesList"); // Works
sel.name = "name"; // FIXME: We should reconsider the name name...
frm.appendChild(sel);

var datl = document.createElement("datalist");
datl.id = "inputNamesList";
// Populating the dataList
frm.appendChild(datl);

Of course, this doesn't work because the list attribute is not the list = {id for datalist} that I want. The only way to make this work is with the setAttribute method.

How can I solve this without using the setter, but by changing the attribute directly?

When I look in the developer tools, I see that setAttribute("list", id) is not setting the list attribute.

Pym

@DavidThomas, the list attribute. – Speaker

@zzzzBov: indeed: input. – Sleet

Why do you want to solve it without setter? What's wrong with setAttribute ? – Corenecoreopsis

whoa, edit your question no one can understand what you just posted as a comment... – Poree

Ok. You can not change it directly for now. It is element interface: w3.org/TR/dom/#element – Corenecoreopsis

One can set the list attribute. But sel.list seems to be something different in my code. By using setAttribute list = null and setAttribute changes the outerHTML. – Pym

@JorisSpekreijse—yes, there is a distinct difference between a DOM property and an HTML attribute. Some properties and attributes always reflect each other, some don't, and there are differences between browsers. – Acinus