Is there a way to make HTML reusable blocks?

Question

I would like to reuse html block contents web app (I use jquery and bootstrap).

I have a big html block like this:

<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>

There are several blocks like this one in my page, so my html file is going to be a mess. I am looking for a library or a small framework to do something like this:

• first I define my html block structure and apparence;
• then I use it several times, and I change only interresting values, like id , placeholder , etc.

Is there something like this?

Answer 1

You could use jQuery to copy the top div, change some attributes inside and then insert it elsewhere on your page. Depending on what back-end stack you have, most of them also support partial views which are built exactly for this type of scenario.

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

Answer 2

You could create a multidimensional array containing your ids, placeholder text, etc. And loop through to create your form.

Example: https://jsfiddle.net/gue9ryqo/

HTML

<div id='contents'></div>

JQUERY

var arr = [
    ['one', 'placeholder1'],
    ['two', 'placeholder2'],
    ['three', 'placeholder3']
    ];
for(i=0; i<arr.length; i++){
   $('#contents').append(
       "<div>"+
        "<label>Label</label>"+
            "<input type='text' id='"+arr[i][0]+"' placeholder='"+arr[i][1]+"'/>"+
       "</div>"
       );
    }