我有一个动态产品列表。在页面加载时，产品和数据的列表由API填充。当有人对产品进行排序或筛选时，数据会刷新并重新绘制到页面上。一些产品容器可能有更新的数据，而另一些则没有（取决于用户如何排序）
我需要动态计算折扣（节省的钱），每当过滤器/排序应用。
我尝试通过mutationObserver来做到这一点，它可以观察产品价格的任何变化。
我的观察器工作得很好，我只是在纠结如何在观察器检测到更改时将折扣插入DOM树。
我最大的困难是***我如何将突变记录连接到DOM元素***以便我可以进行更改？例如，如果产品1和4的数据发生了变化，我如何只针对这些DOM元素来插入/更改我的内容？

<div class="mainContainer">
    <div class="product one">
        <div class="prodImg"></div>
        <div class="prodDesc"></div>
        <div class="origPrice"></div>
        <div class="prodPrice"></div>
        <div class="prodAddtoCart"></div>
    </div>
    <div class="product two">
        <div class="prodImg"></div>
        <div class="prodDesc"></div>
        <div class="origPrice"></div>
        <div class="prodPrice"></div>
        <div class="prodAddtoCart"></div>
    </div>
    <div class="product three">
        <div class="prodImg"></div>
        <div class="prodDesc"></div>
        <div class="origPrice"></div>
        <div class="prodPrice"></div>
        <div class="prodAddtoCart"></div>
    </div>
    <div class="product four">
        <div class="prodImg"></div>
        <div class="prodDesc"></div>
        <div class="origPrice"></div>
        <div class="prodPrice"></div>
        <div class="prodAddtoCart"></div>
    </div>
</div>

var targetNode = document.querySelector(".mainContainer");
var config = { attributes: true, childList: true, subtree: true, characterData:true };

var callback = (mutationList, observer) => {

for (const mutation of mutationList) {
  if (mutation.type === 'characterData') {
    if (mutation.target.parentElement.className === 'prodPrice') {
        //my psuedo code would look something like this
        $(this).closest('.product').find('.prodAddtoCart').after('<div class="discount">$xx.xx</div>')

     }
    }
}

};

var observer = new MutationObserver(callback);
observer.observe(targetNode, config);