如何在單擊時附加 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>"

步驟 3：Jquery 附加到包裝的 div。

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