首页 > 代码库 > JS无限添加HTML到指定位置

JS无限添加HTML到指定位置

用JS把HTML添加到指定位置有两种写法,一种是用字符串,一种是用javascript中的方法

第一种:

用字符串写

<h2>利用JS无限添加一个相同部分</h2>
        <h5>第一种写法</h5>
        <%--有多少个相同的这里面的值就是几--%>
        <asp:HiddenField ID="hfCount" runat="server" Value=http://www.mamicode.com/"-1" />
        <%--每个就是后面的数字不一样 例如:One1,One2,One3....      --%>
        <asp:HiddenField ID="hfIndex" runat="server" />
        <div id="divOne" runat="server">
<%-- 这里添加HTML --%> </div> <span class="addto"><a href=http://www.mamicode.com/"javascript:void(0);" onclick="AddInfo();">添加</a></span> <br /> <hr />
  <script type="text/javascript">
            $(function () {
                var count = $("#hfCount").val();
                if (count <= 0) {
                    AddInfo();
                }
            })

            function AddInfo() {
                //根据数量来增加   hfCount的值   
                var Count = $("#hfCount").val();  //先取值
                var PageIndex = 0;
                //如果没有就自己加,有就根据个数来定
                if (Count > -1) {
                    var Indexs = $("#hfIndex").val().split(,);  //有多少个dl
                    Count = ++Indexs[Count - 1];  //第几个  取最大值 +1就可以
                    PageIndex = Indexs.length - 1;  //个数

                } else {
                    Count++;
                    PageIndex = Count;
                }

                var strHtml = "\r\n";
                strHtml += "<dl class=‘form_main‘ id=\"Form" + Count + "\">\r\n";
                //这里绑定表的主键  好做修改
                strHtml += "<input type=\"hidden\" name=\"hfID" + Count + "\" value=http://www.mamicode.com/"0\"/>\r\n";

                strHtml += "<dd>\r\n";
                strHtml += "<u>测试数据一:</u>\r\n";
                strHtml += "<input type=‘text‘ id=‘One" + Count + "‘ name=‘One" + Count + "‘ />\r\n";
                strHtml += "</dd>\r\n";

                strHtml += "<dd>\r\n";
                strHtml += "<u>测试数据二:</u>\r\n";
                strHtml += "<input type=‘text‘ id=\"Two" + Count + "\" name=‘" + Count + "‘ />\r\n";
                strHtml += "</dd>\r\n";

                if (Count > 0) {
                    strHtml += "<dt class=\"delete\"><a href=http://www.mamicode.com/"javascript:void(0);\" onclick=\"delControl(‘Form" + Count + "‘)\" >删除</a></dt>\r\n";
                }
                strHtml += "<dt></dt>\r\n";
                strHtml += "</dl>";
//字符串拼接好 $(
"#divOne").append(strHtml); $("#hfCount").val(++PageIndex); var dd = $("#hfIndex").val(); dd += Count + ","; $("#hfIndex").val(dd); } //删除 function delControl(id) { $("dl").remove("#" + id); //我们让下面的ID删除,数量减一就可以了 var count = $("#hfCount").val(); //取值 $("#hfCount").val(--count); //计算后赋值 var index = $("#hfIndex").val(); //0,1,2,3 index = index.replace(id.replace("Form", "") + ",", ""); //删除第几个就把 x, 删除 $("#hfIndex").val(index); }

   技术分享

 

4代表是有多少个,下面的0,1,4,5,代表dl里面的数字   这个是对应的,后台取值需要

技术分享

 

第二种,利用Javascript创建元素来写

   <h5>第二种写法</h5>
        <div id="divHtml" runat="server">
        </div>
        <asp:HiddenField ID="hfTest" Value=http://www.mamicode.com/"0" runat="server" />
        <span class="addto"><a href=http://www.mamicode.com/"javascript:void(0);" onclick="AddHtml();">添加</a></span>

 

      function AddHtml() {
                var count = $("#hfTest").val();
                var divHtml = document.getElementById("divHtml");
                var newdl = document.createElement("dl"); //创建一个元素
                newdl.setAttribute("class", "form_main");   //设置属性
                newdl.setAttribute("id", "FormOne" + count);

                //创建第一个dd
                var newdd0 = document.createElement("dd"); //创建一个子元素
            
                //u
                var newu0 = document.createElement("u");
                newu0.innerHTML = "测试数据One";  //设置文本
                newdd0.appendChild(newu0);   //dd里面添加 u
                //input
                var newinput0 = document.createElement("input");
                newinput0.setAttribute("id", "DataOne" + count);
                newinput0.setAttribute("Name", "DataOne" + count);
                newinput0.setAttribute("type", "text");

                newdd0.appendChild(newinput0);   //dd里面添加 input
                newdl.appendChild(newdd0);          //dl里面添加dd

                //第二个
                var newdd1 = document.createElement("dd");
             
                ////u
                var newu1 = document.createElement("u");
                newu1.innerText = "测试数据Two";  
                newdd1.appendChild(newu1);
                //input
                var newinput1 = document.createElement("input");
                newinput1.setAttribute("type", "text");
                newinput1.setAttribute("id", "DataTwo" + count);
                newinput1.setAttribute("Name", "DataTwo" + count);

                newdd1.appendChild(newinput1);
                newdl.appendChild(newdd1);
                if (count > 0) {
                    //创建删除
                    var newdeldt = document.createElement("dt");
                    newdeldt.setAttribute("class", "delete");
                    var newa = document.createElement("a");
                    newa.setAttribute("href", "javascript:void(0)");
                    newa.setAttribute("onclick", "deleteHtml(‘FormOne" + count + "‘)");
                    newa.innerHTML = "删除";
                    newdeldt.appendChild(newa);
                    newdl.appendChild(newdeldt);
                }
                var dt = document.createElement("dt");
                newdl.appendChild(dt);
                divHtml.appendChild(newdl);  //把dl添加到div里面
                count++;
                $("#hfTest").val(count);
            }

            function deleteHtml(id) {
$(
"#" + id).remove(); var count = $("#hfTest").val(); count--; $("#hfTest").val(count--);
//个数 并保证 dl的id以xx0,xx1,xx2,xx3的规律
var i = 0; $("#divHtml dl").each(function () {
//设置每个dl的属性,方便后台取值 $(
this).attr("id","FormOne" + i); $(this).children("dd:eq(0)").find("input").attr({ "id": "DataOne" + i, "name": "DataOne"+i }); $(this).children("dd:eq(1)").find("input").attr({ "id": "DataTwo" + i, "name": "DataTwo" + i }); $(this).children("dt[class=‘delete‘]").attr("onclick", "deleteHtml(‘FormOne" + i + "‘)"); i++; }) }

页面

技术分享

 

 生成的HTML,id很有规律

 技术分享

 

JS无限添加HTML到指定位置