将元素添加到DOM后如何立即对其进行聚焦

Question

I have a dropdown list which shows up on a button click. This dropdown list is not available in the DOM until the button is clicked. How can I get the focus on the first list item of this dropdown list as soon as it is added to the DOM.

Thank you.

Answer 1

For ex: If your dropdown element id is "selectstate", then you could do it using getElementById

   <select id="state" name="state">
<option value="AB">AB</option>
<option value="AC">AC</option>
</select>


window.onload = function() {

    document.getElementById("state").focus();
};

Answer 2

Below snippet will help you to create a dropdown button on DOM then focus it. Of course you've to improve it.

 createDropdown = function(optsArray) { let dd = document.createElement("select"); dd.setAttribute("id", "foo"); for(var i =0; i<optsArray.length; i++) { let opt = document.createElement("option"); opt.setAttribute("value", i); let optText = document.createTextNode(optsArray[i]); opt.appendChild(optText); dd.appendChild(opt); } let cnt = document.getElementById("dropdown-container"); cnt.innerHTML=""; cnt.appendChild(dd); dd.focus(); } document.querySelector("button").addEventListener("click", function() { let opts = ["Marx", "Engels", "Lenin", "Gramsci", "Althusser", "Zizek"]; createDropdown(opts); }) 

 #dropdown-container{ margin-top: 700px; } 

 <button>Click me to load dropdown and focus it</button> <div id="dropdown-container"></div>