如何在单击时附加div？

Question

假设我有这个div

        <div class="row deliver-to forms">
            <div class="col-4">
                <label>Region</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
            </div>
            <div class="col-4">
                <label>District</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
            </div>
            <div class="col-4">
                <label>Town</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
            </div>
        </div>    

还有这个按钮

<button class="btn btn-primary btn-flat mt-3 offset-10 add_place" type="button" id="add_place">
    <i class="fa fa-plus"></i>
</button>

我如何通过点击这个按钮将整个div追加到它的后面呢？

我的代码的整个结构如下所示：

        <div class="row deliver-to forms">
            <div class="col-4">
                <label>Region</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
            </div>
            <div class="col-4">
                <label>District</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
            </div>
            <div class="col-4">
                <label>Town</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
            </div>
        </div>
        <button class="btn btn-primary btn-flat mt-3 offset-10 add_place" type="button"
                id="add_place">
            <i class="fa fa-plus"></i>
        </button>

Answer 1

​

$("button").click(function(){
        $(".next").append("<div class=\"row deliver-to forms\">\n" +
            "            <div class=\"col-4\">\n" +
            "                <label>Region</label>\n" +
            "                <input class=\"w-50 mt-2 form-control\" type=\"text\" data-id=\"region-to\" id=\"region-to\">\n" +
            "            </div>\n" +
            "            <div class=\"col-4\">\n" +
            "                <label>District</label>\n" +
            "                <input class=\"w-50 mt-2 form-control\" type=\"text\" data-id=\"district-to\" id=\"district-to\">\n" +
            "            </div>\n" +
            "            <div class=\"col-4\">\n" +
            "                <label>Town</label>\n" +
            "                <input class=\"w-50 mt-2 form-control\" type=\"text\" data-id=\"town-to\" id=\"town-to\">\n" +
            "            </div>\n" +
            "        </div>")});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row deliver-to forms">
            <div class="col-4">
                <label>Region</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
            </div>
            <div class="col-4">
                <label>District</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
            </div>
            <div class="col-4">
                <label>Town</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
            </div>
        </div>
        <button class="btn btn-primary btn-flat mt-3 offset-10 add_place" type="button"
                id="add_place">
            <i class="fa fa-plus">click</i>
        </button>
        <div class="next"></div>

​

Answer 2

步骤1:尝试用特定id的div包装它。

<div id="newrow">
    <div class="row deliver-to forms">
            <div class="col-4">
                <label>Region</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
            </div>
            <div class="col-4">
                <label>District</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
            </div>
            <div class="col-4">
                <label>Town</label>
                <input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
            </div>
        </div>
</div>

步骤2:在jquery中创建一个变量，并将要追加的元素分配给该元素。示例：

var element = "<div> New Div Appending</div>"

Step3:要附加到包装的div。

$("#newrow").append(element)