如何使用 <templates> 替换内联html字符串？

Question

I'm trying to create a customer form where the user is able to add as many address fields as they like. I'd need to retain their IDs so that I can access them from my backend server. How do I change the id values of child elements of a template tag?

I've made one already but it uses inline strings which is difficult to maintain according to my lead and so he suggested that I do it using templates however I can't figure out how to behave the same way as my original code.

var count = 2;
var i = 1;
$("#addAddress").on("click", function () {
    var addressLine = document.createElement("div");
    addressLine.id = "address-" + count;
    addressLine.innerHTML = `
                <p>Address ${count}</p>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress1">CustomerAddress1</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress1" name="CustomerAddresses[${i}].CustomerAddress1" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress1" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress2">CustomerAddress2</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress2" name="CustomerAddresses[${i}].CustomerAddress2" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress2" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress3">CustomerAddress3</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress3" name="CustomerAddresses[${i}].CustomerAddress3" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress3" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress4">CustomerAddress4</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress4" name="CustomerAddresses[${i}].CustomerAddress4" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress4" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerCountryCode">CustomerCountryCode</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerCountryCode" name="CustomerAddresses[${i}].CustomerCountryCode" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerCountryCode" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerPostNumber">CustomerPostNumber</label>
                    <div class="col-md-10">
                        <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerPostNumber" name="CustomerAddresses[${i}].CustomerPostNumber" type="text" value="">
                        <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerPostNumber" data-valmsg-replace="true"></span>
                    </div>
                </div>
          `

    $("#address-group").append(addressLine);
    i++;
    count++;

});

Answer 1

If you do not want to use a ready-made solution, you can homebrew your own templating system with the use of regex.

// 1 take the contents of your template
addressLine.innerHTML = $('#adrtmpl').html()
    // 2. replace all ${count} strings with `count`
    .replace(/\$\{count\}/g, count)
    // 3. replace all ${i} strings with `i` 
    .replace(/\$\{i\}/g, i);

 var count = 2; var i = 1; $("#addAddress").on("click", function() { var addressLine = document.createElement("div"); addressLine.id = "address-" + count; addressLine.innerHTML = $('#adrtmpl').html().replace(/\\$\\{count\\}/g, count).replace(/\\$\\{i\\}/g, i); $("#address-group").append(addressLine); i++; count++; }); 

 #address-group { border: 1px solid black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <template id="adrtmpl"> <p>Address ${count}</p> <div class="form-group"> <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress1">CustomerAddress1</label> <div class="col-md-10"> <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress1" name="CustomerAddresses[${i}].CustomerAddress1" type="text" value=""> <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress1" data-valmsg-replace="true"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress2">CustomerAddress2</label> <div class="col-md-10"> <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress2" name="CustomerAddresses[${i}].CustomerAddress2" type="text" value=""> <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress2" data-valmsg-replace="true"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress3">CustomerAddress3</label> <div class="col-md-10"> <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress3" name="CustomerAddresses[${i}].CustomerAddress3" type="text" value=""> <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress3" data-valmsg-replace="true"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerAddress4">CustomerAddress4</label> <div class="col-md-10"> <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerAddress4" name="CustomerAddresses[${i}].CustomerAddress4" type="text" value=""> <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerAddress4" data-valmsg-replace="true"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerCountryCode">CustomerCountryCode</label> <div class="col-md-10"> <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerCountryCode" name="CustomerAddresses[${i}].CustomerCountryCode" type="text" value=""> <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerCountryCode" data-valmsg-replace="true"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-2" for="CustomerAddresses_${i}__CustomerPostNumber">CustomerPostNumber</label> <div class="col-md-10"> <input class="form-control text-box single-line" id="CustomerAddresses_${i}__CustomerPostNumber" name="CustomerAddresses[${i}].CustomerPostNumber" type="text" value=""> <span class="field-validation-valid text-danger" data-valmsg-for="CustomerAddresses[${i}].CustomerPostNumber" data-valmsg-replace="true"></span> </div> </div> </template> <button id="addAddress">add address</button> <div id="address-group"> </div>