jQuery .append() not working in firefox for script tag-CodePudding

I have a template in my body in a script tag like below:

<script id="template" type="text/html">
    <div >First:<b>{FirstName}</b></div>
</script>

I want simply add another content to this template on the fly.

The following code works perfectly on Google Chrome:

$('#template').append('<div >Last:<b>{LastName}</b></div>');

But it will not work in Firefox.

The following jsfiddle excample made for this purpose.

$(document).ready(function() {
    $('#holder').append('Preparing data ...');
    
    $('#template').append('<div >Last:<b>{LastName}</b></div>');
    
  $('#holder').html($('#template').html());
});

body {
  padding: 100px;
}

#holder {
  border: 2px solid #bbb;
  background-color: #eee;
  padding: 10px;
  margin: 10px auto;
}
.row-item {
  background-color: lightyellow;
  padding: 10px;
  margin:10px;
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="holder">Test Append On Script Template in Firefox</div>
<script id="template" type="text/html">
    <div >First:<b>{FirstName}</b></div>
</script>

CodePudding user response：

Here are the fixed codes. Just try it out..!

$(document).ready(function() {
    $('#holder').append('Preparing data ...');

    // Try to use this code...
    $('#template').html($('#template').html()   '<div >Last:<b>{LastName}</b></div>');
    
    $('#holder').html($('#template').html());
});

body {
  padding: 100px;
}

#holder {
  border: 2px solid #bbb;
  background-color: #eee;
  padding: 10px;
  margin: 10px auto;
}
.row-item {
  background-color: lightyellow;
  padding: 10px;
  margin:10px;
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="holder">Test Append On Script Template in Firefox</div>
<script id="template" type="text/html">
    <div >First:<b>{FirstName}</b></div>
</script>

CodePudding user response：

try insertAdjacentHTML - VanillaJS

$('#template')[0].insertAdjacentHTML('beforeend','<div >Last:<b>{LastName}</b></div>');