Javascript 使用jquery附加整个div及其所有元素

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

当用户单击

添加另一个图像时

我想附加整个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>

4.将图像添加到您的酒店
图像文件
选择文件
改变

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>

$（文档）.ready（函数（）{
var计数=2；
$（“#另一个_图像”）。单击（函数（）{
如果（计数<7）{
$（'


选择文件
改变
）。附于（“#图像”）；
计数++；
}
});
});

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

使用

.appendTo（）

以及

clone（）

如果不使用

clone（）

相同的div将被替换，并且目标中不会更新任何内容。您不需要键入/复制整个html

语法：

$（元素选择器）.appendTo（目标选择器）

---

---

*注意：克隆现有html可能会创建重复的ID。小心点。

我更喜欢@Shaunak的答案，它更有效，但是如果你想按照自己的方式去做，那么请检查和下面的代码

$(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++;
            }
        });
});

$（文档）.ready（函数（）{
var计数=2；
$（“#另一个_图像”）。单击（函数（）{
如果（计数<7）{
$（“

”+
'' +
''+
'' +
'' +
''+
“选择文件”+
“改变”+
''+
''）。附于（“#图像”）；
计数++；
}
});
});

您是否签入了开发人员工具的HTML选项卡？是否追加？$（'#image'）.append（yourHtml）；我认为这应该足够了，因为你的代码实际上工作得很好。看看它在这里工作：但它在我的应用程序中不工作。我检查了开发人员工具，其中也没有appending.check for id replication.tnx@shaunak，但它必须动态更改输入type='file'中的

name='files2'

字段。这一个是否可能。如果您看到DOM，则名称正在更改：）

$(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++;
            }
        });
});