使用jquery动态添加多个html元素答案

【问题标题】：Add multiple html element dynamically using jquery使用jquery动态添加多个html元素
【发布时间】：2015-09-25 21:01:34
【问题描述】：

我想在按钮单击时动态添加多个 html 元素并获取每个元素的值。也可以在单击按钮时删除创建的元素。 HTML 元素将是文本框和电话号码的其他文本框。

我尝试在单击按钮时创建单个文本框。小提琴：https://jsfiddle.net/dvkeojqn/

HTML：

<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
    <!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />

JS：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("#btnGet").bind("click", function () {
        var values = "";
        $("input[name=DynamicTextBox]").each(function () {
            values += $(this).val() + "\n";
        });
        alert(values);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
});
function GetDynamicTextBox(value) {
    return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;' +
            '<input type="button" value="Remove" class="remove" />'
}
</script>

【问题讨论】：

看起来还不错 - jsfiddle.net/arunpjohny/61fawqp2/1 - 有什么问题
它工作正常，有什么问题？
我想在按钮点击时添加多个文本框。目前只创建了一个

标签： javascript jquery html dom

【解决方案1】：

尝试替换此功能..

$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("#btnGet").bind("click", function () {
        var valuesarr = new Array();   
        var phonearr = new Array(); 
        $("input[name=DynamicTextBox]").each(function () {
            valuesarr.push($(this).val());
        });
        $("input[name=phoneNum]").each(function () {
            phonearr.push($(this).val());
        });
        alert(valuesarr); alert(phonearr);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
});
function GetDynamicTextBox(value) {
       return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input name = "phoneNum" type="text" />&nbsp;<input type="button" value="Remove" class="remove" />';
}

和HERE is the FIDDLE.

【讨论】：

【解决方案2】：

尝试替换这段 JavaScript 代码..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("#btnGet").bind("click", function () {
        var values = "";
        $("input[name=DynamicTextBox]").each(function () {
            values += $(this).val() + "\n";
        });
        alert(values);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
});
function GetDynamicTextBox(value) {
       return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input name = "DynamicTextBox" type="text" value="'+ value +'" />&nbsp;<input type="button" value="Remove" class="remove" />';
}
</script>

【讨论】：