我的html中有以下路径元素：
SevenZipCompressor现在我想以编程方式（通过Javascript）添加路径元素中的以下元素：
<path fill="#edf1f2" stroke="#ff8d35" d="M236,-8C236,-8 336,-8 336,-8 342,-8 348,-14 348,-20 348,-20 348,-60 348,-60 348,-66 342,-72 336,-72 336,-72 236,-72 236,-72 230,-72 224,-66 224,-60 224,-60 224,-20 224,-20 224,-14 230,-8 236,-8">
</path>
所以结果看起来像这样：
<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="3"></animate>
我怎样才能做到这一点？我想通过Javascript或JQuery做到这一点，但没有像D3 lib这样的外部库
更新 这是我尝试使用append的代码，但它不起作用：
<path fill="#edf1f2" stroke="#ff8d35" d="M236,-8C236,-8 336,-8 336,-8 342,-8 348,-14 348,-20 348,-20 348,-60 348,-60 348,-66 342,-72 336,-72 336,-72 236,-72 236,-72 230,-72 224,-66 224,-60 224,-60 224,-20 224,-20 224,-14 230,-8 236,-8">
<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="3"></animate></path>
我只是对<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#1").children("path").append('<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="3"></animate>')
});
</script>
</head>
<body class="descendants">
<g id="1">
<svg width="320" height="320" viewBox="0 0 320 320">
<path
id="path1:0" fill="#edf1f2" stroke="#ff8d35"
d="M160,100 Q200,100,200,300 Q100,300,100,200 Z">
</svg>
</g>
</body>
</html>
元素的引用，因此我使用g来查找$('#1').children元素。