Question 36511 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

<script id="template" type="text/html">
    <div class="row-item">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 class="row-item">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 class="row-item">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 class="row-item">First:<b>{FirstName}</b></div>
</script>
Tags:

2

Answers


  1. 0

    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 class="row-item">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 class="row-item">First:<b>{FirstName}</b></div>
</script>
    Login or Signup to reply.
  2. 0

    try insertAdjacentHTML – VanillaJS

    $('#template')[0].insertAdjacentHTML('beforeend','<div class="row-item">Last:<b>{LastName}</b></div>');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search