使用JavaScript动态创建元素 [英] Dynamic creating elements using javascript

问题描述

所以我使用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_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_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外，其他所有内容都完美显示，并且我创建了完美的按钮。有人可以帮助我吗？

解决方案

您使用 .appendChild（）不正确。例如，这行代码：

  search_input.appendChild（search_span）; 
  

试图制作< span> < input> 的孩子。这不是合法的HTML。

请记住 x.appendChild（y）使 y DOM层次结构中的 x 的子元素。

我们无法真正地建议正确的附加顺序是什么，因为我们不知道您试图结束的HTML结构。如果您向我们展示了DOM层次结构在完成时的样子，我们可以帮助您获得相应的代码。

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.

解决方案

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.

这篇关于使用JavaScript动态创建元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！