html - Dynamic creating elements using javascript -


so have created elements in html using javascript. problem button not showing up. following code:

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); 

everything else showing except search_button , have created buttons work perfectly. can kindly assist me? in advance.

you're using .appendchild() incorrectly. example, line of code:

search_input.appendchild(search_span); 

is trying make <span> child of <input>. not legal html.

remember x.appendchild(y) makes y child of x in dom hierarchy.

we can't advise exact right sequence of appending because don't know html structure you're trying end with. if show want dom hierarchy when you're done, can proper code achieve that.


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -