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层次结构在您完成后的样子，我们可以帮助您使用正确的代码来实现这一目标。

使用javascript动态创建元素

1 个答案: