当innerhtml被javascript代码更改时，Mutation观察者不触发

Question

我有一个MutationObserver，当元素的innerhtml发生变化时，它会观察到一个元素具有id shipping_cost和updateTotal()火函数。当从外部源(例如MutationObserver元素)更改innerHTML时，innerHTML可以工作。但是，当我从javascript内部更改innerHTML时，MutationObserver没有被解雇，我在哪里做错了？

在代码中可以看到，在javascript的末尾，我试图从javascript内部更改innerhtml，但是id total元素的innerhtml没有改变，这表明updateTotal()没有被触发。

但是，当我使用updateTotal()元素更改innerhtml时，函数->就会被触发(在chrome:右键单击->检查)。我该怎么解决这个问题？

​

const subtotal = document.getElementById("subtotal");
const shipping_cost = document.getElementById("shipping_cost");
const total = document.getElementById("total");
const price_loading_text = "Loading . . .";
shipping_cost.innerHTML = price_loading_text;
total.innerHTML = price_loading_text;
function updateTotal() {
    if(shipping_cost.innerHTML != price_loading_text) {
        total.innerHTML = parseFloat(subtotal.innerHTML) + parseInt(shipping_cost.innerHTML);
    } else {
        total.innerHTML = price_loading_text;
    }
}
updateTotal();

observer = new MutationObserver(updateTotal);

observer.observe(shipping_cost, {
attributes: false,
childList: false,
subtree: true,
characterData: true});

shipping_cost.innerHTML = "100";

<p>Subtotal: <span id="subtotal" class="subtotal">9999</span></p>
<p>Shipping_cost: <span id="shipping_cost" class="shipping_cost"></span></p>
<p>Total: <span id="total" class="total"></span></p>

​

Answer 1

正在做什么

shipping_cost.innerHTML = "100";

修改元素的子元素--具体来说，它从DOM中删除所有现有的子元素，然后插入一个新的文本节点作为子节点。这就使得你不必凭直觉行事。

childList: false,

而是相反

childList: true,

才能看到孩子们的变化。

​

const subtotal = document.getElementById("subtotal");
const shipping_cost = document.getElementById("shipping_cost");
const total = document.getElementById("total");
const price_loading_text = "Loading . . .";
shipping_cost.innerHTML = price_loading_text;
total.innerHTML = price_loading_text;

function updateTotal() {
  if (shipping_cost.innerHTML != price_loading_text) {
    total.innerHTML = parseFloat(subtotal.innerHTML) + parseInt(shipping_cost.innerHTML);
  } else {
    total.innerHTML = price_loading_text;
  }
}
updateTotal();

observer = new MutationObserver(updateTotal);

observer.observe(shipping_cost, {
  attributes: false,
  childList: true,
  subtree: true,
  characterData: true
});

shipping_cost.innerHTML = "100";

<p>Subtotal: <span id="subtotal" class="subtotal">9999</span></p>
<p>Shipping_cost: <span id="shipping_cost" class="shipping_cost"></span></p>
<p>Total: <span id="total" class="total"></span></p>

​

尽管如此，当您无法控制的代码对DOM进行突变时，我建议只使用观察者。如果您控制了应用程序中的所有代码，那么在更改DOM之后调用所需的函数通常要容易得多。例如，不要做

shipping_cost.innerHTML = "100";

但要做

const updateShippingCost = (newCost) => {
  shipping_cost.innerHTML = newCost;
  total.innerHTML = Number(subtotal.innerHTML) + newCost;
};
updateShippingCost(100);