Dynamic creating elements using javascript

Question

So I have created elements in my html using javascript. The only problem is that my button is not showing up. Following is my 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 is showing perfectly except for the search_button and I have created buttons like this that work perfectly. Can someone kindly assist me? Thanks in advance.

Yes I have. Like I said everything is visible and even if I "inspect element" in browser, Html code shows the button being created but it is still not visible. — Farooq A. Lodhi
– Farooq A. Lodhi, Commented Feb 6, 2016 at 19:53
Please post the rest of your code so we can see what actually is going on — Asons
– Asons, Commented Feb 6, 2016 at 19:54

jfriend00 · Accepted Answer · 2016-02-06 21:59:29Z

3

You're using .appendChild() incorrectly. For example, this line of code:

search_input.appendChild(search_span);

Is trying to make a <span> a child of an <input>. That is not legal HTML.

Remember x.appendChild(y) makes y a child of x in the DOM hierarchy.

We can't really advise what the exact right sequence of appending is because we don't know what HTML structure you're trying to end up with. If you show us what you want the DOM hierarchy to look like when you're done, we can help with the proper code to achieve that.

edited Feb 6, 2016 at 21:59

answered Feb 6, 2016 at 19:55

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Farooq A. Lodhi Over a year ago

You're right. I didn't see that. Honestly that has to be the stupidest mistake I could've made. Thanks for the help.

Collectives™ on Stack Overflow

Dynamic creating elements using javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related