jquery - 有没有办法使 HTML 可重用 block ？

Question

我想重用 html block 内容网络应用程序(我使用 jquery 和 bootstrap)。

我有一个像这样的大 html block :

<div class="row form-group">
    <label class="col-lg-4 control-label" for="distMotors">Drawing size</label>
    <div class="col-lg-8">
        <div class="col-sm-6" style="padding: 0px">
            <label style="width:5em; float:left; padding-top: 8px;"
                    class="control-label visible-xs" for="drawingWidth">Width</label>
            <div class="input-group" style="max-width: 10em">
                <input disabled type="number" id=drawingWidth min="10" max="500"
                        class="form-control" placeholder="150" data-error="Set a number between 10 and 500.">
                <span class="input-group-addon">cm</span>
            </div>

        </div>
        <span class="col-sm-1 hidden-xs"style="text-align: center; padding: 7px 0px">X</span>
        <label style="width:5em; float:left; padding-top: 8px;"
                class="control-label visible-xs" for="drawingHeight">Height</label>
        <div class="col-sm-5" style="padding: 0px">
            <div class="input-group" style="max-width: 10em">
                <input disabled id=drawingHeight type="number" min="10" max="500"
                        class="form-control" placeholder="150" data-error="Set a number between 10 and 500.">
                <span class="input-group-addon">cm</span>
            </div>
        </div>
        <span class="help-block">Width and height of the drawing on the showcase.</span>
        <div class="help-block with-errors"></div>
    </div>
</div>

我的页面中有几个像这样的 block ，所以我的 html 文件会变得一团糟。我正在寻找一个库或一个小型框架来做这样的事情:

• 首先我定义我的 html block 结构和外观；
• 然后我多次使用它，我只更改有趣的值，如 id、placeholder 等。

有这样的东西吗？

Answer 1

您可以使用 jQuery 复制顶部的 div，更改其中的一些属性，然后将其插入页面的其他位置。根据您拥有的后端堆栈，它们中的大多数还支持专为此类场景构建的部分 View 。

jQuery:

var element = $('.row.form-group').clone();
element.children('.input-group').attr('id', new_id); // change attribute
$('.new_parent').append(element); // .new-parent is the class of the element to which you want to append the copy