jquery appended html is not working

Question

I tried to empty a svg and append some it's inner divs back, it doesn't work but can see the html parts are loaded in the browser in faded colour. When i edited it in the browser and add it back it works.

The div part,

<li class="chart">
    <svg id="lineChartSVG" class="lineChart--svg">
       <defs>
           <linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
                            <stop class="lineChart--gradientBackgroundArea--top" offset="0%" />
                            <stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />
            </linearGradient>
         </defs>
     </svg>               
 </li>

this is the way i did,

$('#lineChartSVG').empty();
 var html = ' <defs> <linearGradient id=\"lineChart--gradientBackgroundArea\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"> <stop class=\"lineChart--gradientBackgroundArea--top\" offset=\"0%\" /> <stop class=\"lineChart--gradientBackgroundArea--bottom\" offset=\"100%\" /> </linearGradient> </defs>';
 $('#lineChartSVG').append(html);
 inFlightRequestCountChart(); 

Any help will be really appreciated.

Thank You!

Answer 1

It is because the SVG element is not updated dynamically. It should update once you refreshed your container element. In this case <li> i.e. give it id='chart1', but I suggest to use a specified (by you) container for it.

$("#chart1").html($("#chart1").html());

Explanation: jquery's append not working with svg element?

Example: http://jsbin.com/ejifab/1/edit