观察到变异后动态插入内容

Question

我有一个动态产品列表。在页面加载时，产品和数据列表由 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);