使用javascript動態創建元素

Question

所以我使用javascript在我的html中創建了元素。 唯一的問題是我的按鈕沒有出現。 以下是我的代碼：

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

除了search_button之外，其他所有內容都完美呈現，我創建了這樣的按鈕，完美無缺。 有人可以幫助我嗎？ 提前致謝。

Answer 1

您正在使用.appendChild() 。 例如，這行代碼：

search_input.appendChild(search_span);

試圖讓<span>成為<input>的孩子。 這不是合法的HTML。

請記住， x.appendChild(y)使y成為DOM層次結構中x的子級。

我們無法真正建議正確的追加順序是什么，因為我們不知道您想要最終使用的HTML結構。 如果您在完成后向我們展示了您希望DOM層次結構的樣子，我們可以幫助您使用正確的代碼來實現這一目標。