动态添加html示例

  <table id="voteitem">
                <tr>
                    <td>选项1：</td>
                    <td>
                          <input name="VoteOptions" class="required" type="text"  alt="请输入投票选项" value="@ViewBag.VoteOptions"/>
                    </td>
                </tr>
            </table> 

<script type="text/javascript" language="javascript">
        function add_input_file(tbfile, index) {
            file_name = "VoteOptions" + index;
            var tr_file = document.createElement("tr");
            var td_file = document.createElement("td");
            var td_file1 = document.createElement("td");
            td_file1.setAttribute
            var text = document.createElement("span");
            text.setAttribute("innerText", "选项" + index);
            td_file1.appendChild(text);

            var input_file = document.createElement("input")
            input_file.setAttribute("type", "text")
            input_file.setAttribute("class","required");
            input_file.setAttribute("name", file_name)

            td_file.appendChild(input_file)

            tr_file.appendChild(td_file1);
            tr_file.appendChild(td_file)
            tbfile.appendChild(tr_file)
        }
        function add_one_file() {
            var tb_file = document.getElementById("upload_file");
            var count_file = document.getElementById("upload_file").childNodes.length;

            add_input_file(tb_file, count_file);
        }

        var i = 1;
        function AddItem() {
            i++;
            if (i > 15) {
                alert("最大只允许15个选项！");
                return;
            }
            var htmldata = "<tr><td>选项" + i + "：</td><td> <input class='required' name='VoteOptions" + i + "' type='text' ></td></tr>";
            jQuery("#voteitem").append(htmldata);
        }
        function ResetItem() {
            i = 1;
            var obj = document.getElementById("voteitem");
            obj.innerHTML = "<tr><td>选项1：</td><td> <input class='required'  type='text'></td></tr>";
        }

    </script>

转载于:https://www.cnblogs.com/weidehao555/p/3262587.html