appendChild

 <div id="list" runat="server">
            <%--<div id="po">
            </div>--%>
        </div>

        <script>
    function test(t)
    {
        if(t.selectedIndex==-1)
        {
            return;
        }
       
       
         //alert(t[t.selectedIndex].value);
        //alert(t[t.selectedIndex].text);
          var tvalue=t[t.selectedIndex].value;
          var ttext=t[t.selectedIndex].text;
          var list=document.getElementById("list");
          if(document.getElementById("div"+tvalue)==null)
          {
              var count=document.getElementById("list").getElementsByTagName("DIV").length;
               var hid=document.getElementById("hid"+count);
//              if(count>=2)
//              {
//                alert("");
//                return false;
//              }
              var   newNode=document.createElement("div");  
              newNode.setAttribute("id","div"+tvalue);  
//              var   txtNode=document.createTextNode(t[t.selectedIndex].value);  
//              newNode.appendChild(txtNode); 
            
              var id="txt"+tvalue;
              var ipt1 = document.createElement("input");
              ipt1.id=id;
              ipt1.name = id;
              ipt1.value = ttext;
              ipt1.type="text";
              newNode.appendChild(ipt1);
             
              var id="txt"+ttext;
              var ipt1 = document.createElement("input");
              ipt1.id=id;
              ipt1.name = id;
              ipt1.value = "取消";
              ipt1.type="button";
              ipt1.onclick=function test()
              {
                var d=document.getElementById("div"+tvalue); 
                //d.style.visibility="hidden";
                //d.style.visibility="visible";
                //d.style.display="none";
                //d.style.display="inline";
                d.parentNode.removeChild(d);   //删除
                hid.value="";
              }
             
            
              hid.value=tvalue;
             
              newNode.appendChild(ipt1);
             
             
               //list.insertBefore(newNode);  
               list.appendChild(newNode);  

               //list.insertBefore(newNode,document.getElementById("po"));  
              //list.appendChild(newNode,document.getElementById("po"));  
          }
          else
          {
              alert("已经存在!");
          }
          //alert(list.innerHTML);
    }
        </script>

        <select id="RawPageID" size="13" style="color: #666666" multiple="multiple" onclick="test(this)">
            <option value="11111111">zwei1 11111111</option>
            <option value="22222222">zwei2 22222222</option>
            <option value="33333333">zwei3 33333333</option>
            <option value="44444444">zwei4 44444444</option>
        </select>
        <%--        <asp:HiddenField runat=server ID=hid0 />
        <asp:HiddenField runat=server ID="hid1" />
        <asp:HiddenField runat=server ID="hid2" />
        <asp:HiddenField runat=server ID="hid3" />
        <asp:HiddenField runat=server ID="hid4" />
        <asp:HiddenField runat=server ID="hid5" />--%>
        <div>
            <asp:TextBox runat="server" ID="hid0" />
            <asp:TextBox runat="server" ID="hid1" />
            <asp:TextBox runat="server" ID="hid2" />
            <asp:TextBox runat="server" ID="hid3" />
            <asp:TextBox runat="server" ID="hid4" />
            <asp:TextBox runat="server" ID="hid5" />
        </div>

原文地址:https://www.cnblogs.com/zwei1121/p/1062193.html