Как сгенерировать и заполнить html форму «налету»?

Question

[Александр Соболев]

Здравствуйте!
ajax-ом тяну массив объектов, для каждого из которых нужно сгенерировать

форму

<div class="panel panel-default">
		    <div class="panel-heading">
		      <h4 class="panel-title"><a data-toggle="collapse" href="#svg_plan_1">Название SVG Плана ($svg_plan_title)</a></h4>
		    </div>
		    <div id="svg_plan_1" class="panel-collapse collapse m-2">
		      <div class="panel-body">
   		      	<div class="input-group">
   		      		<input type="text" id="svg_url" class="form-control" value=" * " placeholder="URL Ссылка на SVG Файл."><span class="input-group-btn ml-2"><button class="btn btn-info" id="test_svg" type="button">Проверить SVG </button></span>
   		      	</div>
   		      	<div id="svg_test_result" class="row m-2">
   		      		<div class="col-md-6" id="svg_item_list"></div>
   		      		<div class="col-md-6" id="svg_picture"><div class="svg-container"></div></div>
   		      	</div>
		      </div>
		      <div class="panel-footer"></div>
		    </div>
  		</div>

и подгрузить в нее соответствующие данные.
Начал писать вот такую штуку

var form = jQuery("<div>").attr("id", '"plan_"'+plan.id+'"').addClass("panel panel-default");
	         jQuery('#svg_plans_managment').append(form);

и тут возникли вопросы..
Вопрос 1: при достаточно большой вложенности всякого рода слоев и элементов с классами существует ли решение проще?
Вопрос 2: если решение через jQuery(form).load(путь_к_файлу_формы), то как после .load расставить\заменить id-шники элементов для дальшнейшего взаимодействия.. подгрузки обработки итд..
Как сделать правильно?

Answer 1

[Aetae]

Современное решение: современные фреймворки Vue, React, Angular и др.
Вы просто пишете шаблон, все биндинги осуществляет фреймворк.

Решение предыдущего поколения: шаблонизаторы типа Handlebars, Pug и др.