jQuery – 添加元素

添加新的HTML内容

用于添加新内容的四个 jQuery 方法：

• append() – 在被选元素的结尾插入内容
• prepend() – 在被选元素的开头插入内容
• after() – 在被选元素之后插入内容
• before() – 在被选元素之前插入内容

jQuery – 删除元素

删除元素/内容

删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() – 删除被选元素（及其子元素）
• empty() – 从被选元素中删除子元素

例子1

下面举个例子，就以添加一个上传的项为例。

第一步先做个表单

 <div class="row-fluid">
        <div class="span5">
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon"> <i class="icon-align-justify"></i> </span>
                    <h5>Box标题</h5>
                </div>
                <div class="widget-content nopadding">
                    <form action="/Upload/Up1_Handle" method="POST" class="form-horizontal" enctype="multipart/form-data">
                        <div tag="group-parent">
                            <div class="control-group">
                                <label class="control-label">头像 :</label>
                                <div class="controls">
                                    <input type="file" name="files" class="span5" placeholder="请选择图片">
                                    <a href="#" class="btn btn-mini btn-info" tag="add"> + </a>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-success">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

备注： 这里 form 里面的第一个 div 做了一个自定义属性 tag=“group-parent” ，还有一个添加内容的按钮 <a href="#" class="btn btn-mini btn-info" tag="add"> + </a>

点击按钮就在 group-parent 的结尾插入内容。

第二步写上控制的js

<script>
        $(document).ready(function () { 
            var taghtml = "<div class=\"control-group\"><label class=\"control-label\">头像 :</label><div class=\"controls\"><input type=\"file\" name=\"files\" class=\"span5\" placeholder=\"请选择图片\"><a href=\"#\" class=\"btn btn-mini btn-danger remove\"> - </a></div></div>";
            //添加内容 
            $("[tag='add']").click(function () {
                $("[tag='group-parent']").append($html); 
                //删除内容 
                $(".remove").click(function () {
                    $(this).parent().parent().remove();
                });
            });
        });
    </script>

备注： 上面的 taghtml 就是要添加的内容，因为刚才在容器里面做了自定义属性 tag=“group-parent” ，使用 $(“[tag=‘group-parent’]”) 就可以选择到容器了。

然后把要添加的内容 append 到容器的结尾处就行。

例子2

有时候可能不想再增加一个 group-parent 的 div ，可以用 after() 的方法在被选元素之后插入内容。

如果添加的内容只能添加一次，可以将内容保存为一个对象。 $html = $("");

   <script>
        $(document).ready(function () { 
            $html = $("<div class=\"control-group\"><label class=\"control-label\">头像 :</label><div class=\"controls\"><input type=\"file\" name=\"files\" class=\"span5\" placeholder=\"请选择图片\"><a href=\"#\" class=\"btn btn-mini btn-danger remove\"> - </a></div></div>");
            //添加内容 
            $("[tag='add']").click(function () {
                $(this).parent().after(taghtml);
                //删除内容 
                $(".remove").click(function () {
                    $html.remove();
                });
            });
        });
    </script>

来源：https://blog.csdn.net/qq373591361/article/details/51543439

推荐阅读