Parse And Replace Element Attribute Value Of Script Template Using jQuery

Good afternoon fellow programmers!

I recently have a task to load a Script template that contains HTML markup to a page dynamically. But before loading the template, I need to change the attribute values of certain elements such as id and name. However, reading the template object made it difficult for me to convert it to an HTML object so I can traverse and manipulate the DOM. After doing research and some experiments, I found the solution presented below on how to read the value of a Script template and be able to use jQuery methods to traverse and update the DOM elements.

Sample Script Template To Load In A Page

<script type="text/html" id="templateGroup">        
 <div name='divChildSkill_' class="col-md-12" id="divChildSkill_">
  <div class="col-md-12">
   <div class="col-md-6">
    <div class="col-md-4">
     <label id="anchorLabel"></label>
    </div>
    <div class="col-md-1 addLink">
     <a href="javascript:void(0);" onclick="AddSkillGroup(this,'SkillGroups')" id='addSkill_' name='addSkill_' title="Add Skill Group">[+]</a>
    </div>
    <div class="col-md-1 removeLink">
     <a href="javascript:void(0);" onclick="RemoveSkillGroup(this)" id='removeSkill_' name='removeSkill_' title="Remove Skill Group">[-]</a>
    </div>
   </div>
   <div class="col-md-6"></div>
  </div>
  <div class="col-md-12">
   <div id="SoftSkills_" class="col-md-6 leftControlsBottomMultiple">
    <div class="col-md-4">
     <label for=""></label>
    </div>
    <div class="col-md-8">
     <select name="SoftSkills" id="SoftSkills" class="form-control" onchange="SoftSkillsChange(this)">
      @foreach (SelectListItem item in (IEnumerable<SelectListItem>)ViewBag.SoftSkillsItems)
      {
       <option value="@item.Value">@item.Text</option>
      }
     </select>
    </div>
   </div>
   <div id="JavaScript_" class="col-md-6 rightControls">
    <div class="col-md-4">
     <label for=""></label>
    </div>
    <div class="col-md-8">
     <input class="form-control" id="" name="" type="text" value="" />
    </div>
   </div>
  </div>
 </div>
</script>

Given the template above, first is to retrieve the the HTML content of the template which is a string and store it to a variable.

var templateObject = $.trim($('#templateGroup').html());

Next is to parse the template as HTML and convert it to a jQuery object.

templateObject = $($.parseHTML(templateObject));

Then, you can use the jQuery methods to read the DOM in the templateObject variable and update the attributes or get the values from those elements before adding the templateObject to the page/view.

//replace the id and name attributes of an input control
$(templateObject).find("div[id*='JavaScript_']").find('input').attr('id', 'txtJavaScriptSkills');
$(templateObject).find("div[id*='JavaScript_']").find('input').attr('name', 'txtJavaScriptSkills');
//illGroupContainer is a div in the page
$(".illGroupContainer").append(templateObject);

Cheers! :-)