Elementos dynamics de creación usando javascript

Así que he creado elementos en mi html usando javascript. El único problema es que mi botón no se muestra. Lo siguiente es mi código:

var search_div1 = document.createElement("div"); search_div1.className = "input-group row-fluid"; var search_div2 = document.createElement("div"); search_div2.className = "span4 offset4"; var search_input = document.createElement("input"); search_input.className = "form-control offset8"; search_input.id = "searchText"; search_input.type = "text"; search_input.placeholder = "Search..."; search_input.style.width = "200px"; search_input.style.marginLeft = "550px"; var search_span = document.createElement("span"); search_span.className = "input-group-btn"; search_span.width = "50px"; var search_button = document.createElement("button"); search_button.type = "submit"; search_button.id = "search"; search_button.name = "search"; search_button.className = "btn btn-flat"; search_button.onclick = myFunction; var search_icon = document.createElement("i"); search_icon.className = "fa fa-search"; search_button.appendChild(search_icon); search_span.appendChild(search_button); search_input.appendChild(search_span); search_div2.appendChild(search_input); search_div1.appendChild(search_div2); 

Todo lo demás se muestra perfectamente, excepto el botón de búsqueda y he creado botones como este que funcionan perfectamente. ¿Alguien puede ayudarme amablemente? Gracias por adelantado.

Está utilizando .appendChild() incorrectamente. Por ejemplo, esta línea de código:

 search_input.appendChild(search_span); 

Está intentando hacer un hijo de . Eso no es HTML legal.

Recuerde que x.appendChild(y) hace que y sea ​​un hijo de x en la jerarquía DOM.

Realmente no podemos aconsejar cuál es la secuencia exacta correcta para agregar porque no sabemos con qué estructura HTML está tratando de terminar. Si nos muestra cómo desea que se vea la jerarquía DOM cuando haya terminado, podemos ayudarlo con el código adecuado para lograrlo.