使用javascript添加带有动态元素问题的html div

调用以下脚本来动态添加html输入元素。 下面标记的代码（大约30行）有两个问题

1） 当我在第二个输入框（foox1-“姓氏”）下方添加标记代码时，应显示两个输入框

2） 第二，我需要id='suggestions'是动态的，即链接到foox1。我应该像对待其余代码一样使用setAttribute，但我需要首先让上面的1）工作起来

<script language="javascript">

var x = 1;

function add() {
var fooId = "foo";

for (i=1; i<=2; i++)
  {
    //Create an input type dynamically.
    var element = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", fooId+x+i);
    element.setAttribute("name", fooId+x+i);
    element.setAttribute("id", fooId+x+i);

    if(i==1){
           element.setAttribute("value", "First name");
           element.setAttribute("onkeyup", "lookup(this.value);");
           element.setAttribute("onblur", "fill();");

     }
    if(i==2){
          element.setAttribute("value", "Last name");

    }
    var foo = document.getElementById("fooBar");
    foo.appendChild(element);

    /************************************************
    This is where the problem is, in this if statement.  
    This part of the code is required for an autofil in the text box

    ************************************************/

    if(i==1){
        foo.appendChild("<div class='suggestionsBox' id='suggestions' style='display: 
            none;'><img src='upArrow.png' style='position: relative; top: -12px; left: 30px;'         
            alt='upArrow' /><div class='suggestionList' id='autoSuggestionsList'>&nbsp;       </div>    </div>");
    }

    /********************************
    end of code with issues
    ******************************/

    var space = document.createTextNode(" ");
    foo.appendChild(space);  

}
        i++;            
            var element = document.createElement("input");
    element.setAttribute("type", "button");
    element.setAttribute("value", "Remove");
    element.setAttribute("id", fooId+x+i);
    element.setAttribute("name", fooId+x+i);    
    element.setAttribute("onclick", "removeRow(this)");
    foo.appendChild(element);

    var br = document.createElement("br");
    foo.appendChild(br);

    x++;

}
</SCRIPT>

var x=1；
函数add（）{
var fooId=“foo”；
对于（i=1；i您需要以
“+
结束前两行。您需要以
“+
结束前两行。
您不能在以下上下文中使用
.appendChild
。
.appendChild
添加节点而不是字符串

foo.appendChild("<div class='suggestionsBox' id='suggestions' style='display: 
            none;'><img src='upArrow.png' style='position: relative; top: -12px; left: 30px;'         
            alt='upArrow' /><div class='suggestionList' id='autoSuggestionsList'>&nbsp;       </div>    </div>");

foo.appendChild（“”）；

一定是这样

foo.innerHTML += "<div class='suggestionsBox' id='suggestions' style='display: none;'><img src='upArrow.png' style='position: relative; top: -12px; left: 30px;' alt='upArrow' /><div class='suggestionList' id='autoSuggestionsList'>&nbsp;  </div>   </div>";

foo.innerHTML+=”；


编辑：对于问题的第二部分，您可以在上述语句中执行
id='suggestions'+fooId+x+i
。（它将生成类似
id='suggestions'\u For \uFoo11'
）您不能在下面的上下文中使用
.appendChild
。
.appendChild
添加的节点不是字符串

foo.appendChild("<div class='suggestionsBox' id='suggestions' style='display: 
            none;'><img src='upArrow.png' style='position: relative; top: -12px; left: 30px;'         
            alt='upArrow' /><div class='suggestionList' id='autoSuggestionsList'>&nbsp;       </div>    </div>");

foo.appendChild（“”）；

一定是这样

foo.innerHTML += "<div class='suggestionsBox' id='suggestions' style='display: none;'><img src='upArrow.png' style='position: relative; top: -12px; left: 30px;' alt='upArrow' /><div class='suggestionList' id='autoSuggestionsList'>&nbsp;  </div>   </div>";

foo.innerHTML+=”；


编辑：对于问题的第二部分，您可以在上述语句中执行
id='suggestions'+fooId+x+i
。（它将生成类似
id='suggestions'\u For \uFoo11'
）
请添加一个JSFIDLE示例请添加一个JSFIDLE示例