build components dynamically with json

var componentesHTML = {
    newBlock:
    '<div class="componente" data-componente="newBlock" style="width: 100%; z-index: 100;">' +
        '<div class="alert" style="background-color:#951f2c !important;"><span class="sort" style=\"color: white\">[Mover] Block</span>   <span class="pull-right remover" style=\"color: white\">[x]</span>' +
            '<input type="text" class=\"form-control titulo-valor\" placeholder="Nome do Bloco" style=\"background-color:#951f2c !important; color: white !important; border:none !important;\"/>'+
    '</div></div>',
    SubTitulo:
    '<div class="componente" data-componente="SubTitle" style="width: 100%; z-index: 100;  ">' +
    '<div class="alert alert-info"><span class="sort">[Mover]</span> SubTitle <span class="pull-right remove remove-component">[x]</span>' +
    '<input type="text" class=\"form-control titulo-valor\" placeholder="Digite o SubTitle" style=\"background-color:#d9edf7 !important; color: black; border:none !important;\"/>'+
    '</div></div>'
};

$(document).ready(function(){
    $("#menu").append(componentesHTML.newBlock);
    $("#menu").append(componentesHTML.SubTitulo);

});

Is there a framework to make my life easier in development? I think it's very ugly.