javascript - 使用 jquery 附加一个完整的 div 及其所有元素

Question

使用 jQuery 我想在发生点击事件时附加整个 div。我试过了，但没用。

当用户点击 Add another image 时，我想附加整个 div 标签及其所有元素。

这是我的代码:

<form method="post" id="form_property" enctype="multipart/form-data">
    <div class="row">
        <div class="span4" id="image">
             <h3><strong>4.</strong> <span>Add Images to your Property</span></h3>

            <div class="fileupload fileupload-new control-group" data-provides="fileupload">
                <label class="control-label" for="inputPropertyPrice">Image files</label>
                <div class="input-append">
                    <div class="uneditable-input"> <i class="icon-file fileupload-exists"></i>
 <span class="fileupload-preview"></span>

                    </div> <span class="btn btn-file">
                                        <span class="fileupload-new">Select file</span>
 <span class="fileupload-exists">Change</span>

                    <input type="file" name="files1" accept="image/*" />
                    </span>
                </div>
            </div>
        </div>
        <!-- /.span4 -->
    </div>
    <!-- /.row -->
    <br/> <a id="another_image" class="btn btn-primary btn-small list-your-property" href="#">Add Another Image</a>
    <br/>
    <br/>
    <input type="submit" name="submit" value=" Save images " class="btn btn-primary btn-large" style="float: left; width: 370px; height: 50px; margin-top: 10px">
</form>

Jquery

    <script type="text/javascript">

    $(document).ready(function(){
        var count = 2;
        $('#another_image').click (function(){

            if(count < 7){
                $('<br/><br/>
                            <div class="input-append">
                                <div class="uneditable-input">
                                    <i class="icon-file fileupload-exists"></i>
                                    <span class="fileupload-preview"></span>
                                </div>
                                                    <span class="btn btn-file">
                                                        <span class="fileupload-new">Select file</span>
                                                        <span class="fileupload-exists">Change</span>
                                                        <input type="file" name="files'+ count +'" accept="image/*" />
                                                    </span>



                            </div>
                        ').appendTo ("#image");


            count++;
            }
        });
        });
    </script>

有人可以帮我解决这个问题吗？

Answer 1

使用 .appendTo() 和 clone()。

如果您不使用 clone()，相同的 div 将被替换，目标中的任何内容都不会更新。您无需键入/复制整个 html。

Syntax : $(Element_Selector).appendTo(TargetSelector).

---

$($('.input-append').first().clone()).appendTo("#image");

Fiddle

_{*注意:克隆现有的 html 可能会创建重复的 ID。照顾好它。}