jquery附加的html不起作用答案

【问题标题】：jquery appended html is not workingjquery附加的html不起作用
【发布时间】：2015-08-05 16:53:16
【问题描述】：

我试图清空一个 svg 并附加一些它的内部 div，它不起作用但可以看到 html 部分以褪色的颜色加载到浏览器中。当我在浏览器中编辑它并将其添加回来时，它就可以工作了。

div部分，

<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>

我就是这样做的，

$('#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();

任何帮助将不胜感激。

谢谢！

【问题讨论】：

我记得我曾经遇到过一些关于 jQuery ans svg 的问题。问题是 jQuery 将属性视为不区分大小写，但 svg 需要区分大小写的属性。也许检查一下。
这就是你使用的所有 jQuery 吗？
你为什么不简单地使用li元素插入html并重新启动图表实例。如果图表出现问题
试试stackoverflow.com/a/3642265/4772988

标签： javascript jquery html css svg

【解决方案1】：

这是因为 SVG 元素不是动态更新的。刷新容器元素后，它应该会更新。在这种情况下<li> 即给它id='chart1'，但我建议使用指定的（由你）容器。

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

解释：jquery's append not working with svg element?

示例：http://jsbin.com/ejifab/1/edit

【讨论】：

【解决方案2】：

也请尝试清空标签的内容。

 $('#lineChartSVG').text('');

【讨论】：

【解决方案3】：

像这样尝试html()。

$('#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').html(html);
inFlightRequestCountChart();

【讨论】：