通过 ajax 请求观察 div 突变答案

【问题标题】：Observe div mutation via ajax request通过 ajax 请求观察 div 突变
【发布时间】：2018-06-01 13:10:07
【问题描述】：

考虑以下简单结构

<button type="button">Click</button>
<div class="content"></div>

当按钮被点击时，它会触发一个 AJAX 请求，该请求使用其他 div 填充 .content。是否可以观察.content 何时被填充并对其做出反应？

这是我尝试过的，但似乎没有触发回调函数。

  var target_node = document.querySelector('.content');

  const observer = new MutationObserver(function(){
    console.log('changed');
  })

  observer.observe(target_node, {childList: true, subtree: true});

【问题讨论】：

标签： javascript

【解决方案1】：

您的代码正在运行。

下面是一个工作的sn-p

var target_node = document.querySelector('.content');

  const observer = new MutationObserver(function(){
    console.log('changed');
  })

  observer.observe(target_node, {childList: true, subtree: true});
  
  function populate() {
    document.querySelector('.content').innerHTML = Math.random()
  }

<button type="button" onclick="populate()">Click</button>
<div class="content"></div>

【讨论】：

【解决方案2】：

您在哪里设置该代码？可能是target_node为空？

此代码有效：

<html>
<head>
    <script type="text/javascript">
        function populateContent() {
            document.getElementById('content').innerHTML = 'content!';
            document.getElementById('content')
        }
        function setObserver() {
                    const target_node = document.querySelector('.content');

          const observer = new MutationObserver(function(){
            console.log('changed');
          })

          observer.observe(target_node, {childList: true, subtree: true});
        }
    </script>
</head>
<body onload="setObserver()">
<button type="button" onclick="populateContent()">Click</button>
    <div id="content" class="content"></div>
</body>

【讨论】：