Adding a new element dynamically with jQuery problem

Question

I have a script element with HTML content to be added dynamically to page I've tried adding it using jQuery with the following code:

let template = jQuery.validator.format($.trim($('#customTemplate').html()));
$($(template()).html()).appendTo('.custom-class');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js" integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="text/html" id="customTemplate">
  <div class="col-sm-4">
    <div class="form-group">
      <label>Days: <span class="text-danger">*</span></label>
      <input type="date" name="Days" placeholder="Days..." class="form-control required data-required">
    </div>
  </div>
</script>

@CarstenLøvboAndersen https://stackoverflow.com/questions/13883553/what-are-modern-uses-of-script-type-text-html-and-is-this-example-considered-g — mplungjan, May 17 '22 at 12:26

score -1 · Answer 1 · answered May 17 '22 at 12:29

Why the trim?
Why not a template

This works

let template = $('#customTemplate')[0].content;
$('.custom-class').append(template)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<template id="customTemplate">
  <div class="col-sm-4">
    <div class="form-group">
      <label>Days: <span class="text-danger">*</span></label>
      <input type="date" name="Days" placeholder="Days..." class="form-control required data-required">
    </div>
  </div>
</template>

<div class="custom-class"></div>

Adding a new element dynamically with jQuery problem

1 Answers1