html - JavaScript to create a dropdown list and get the selected value

Question

I need to add a dropdown list to a webpage. generally the HTML code is like this;

<select id="au_1_sel" name="au_1_sel" class="searchw8">
    <option value="AU" selected="">method1</option>
    <option value="FI">method2</option>
</select>

How can I use JavaScript to create a element like above. after I create this drop down list. I need to add it after a button.

var button = document.getElementById("button1");

and I already get the button element. Also, when the button is clicked, I want to know which option the people have choose in the dropdown list. How can I do that using JavaScript.

I try this

var select = document.createElement("select");
select.id = "wayToCalculate";
//select.name="au_1_sel";
//select.class=class="searchw8";

var option1 = document.createElement("option");
option1.value="1";
option1.selected="";
option1.innerHTML= "1";

var option2 = document.createElement("option");
option2.value="2";
option2.innerHTML= "2";

var option3 = document.createElement("option");
option3.value="3";
option3.innerHTML= "3";

select.addChild(option1);
select.addChild(option2);
select.addChild(option3);

$(select).insertAfter(button);

but when it comes to this. select.addChild(option1);

chrome browser give me a error.

Uncaught TypeError: undefined is not a function

It seems that addChild does not work here.

Answer 1

Example

HTML:

<div id="container">   
    <button id="button1">button1</button>
</div> 

JavaScript

var div = document.querySelector("#container"),
    frag = document.createDocumentFragment(),
    select = document.createElement("select");

select.options.add( new Option("Method1","AU", true, true) );
select.options.add( new Option("Method2","FI") );


frag.appendChild(select);
div.appendChild(frag);