js如何监听元素是否出现

网页注入一段代码，代码执行后在页面生成一个 id = 'm3u8loading' 的标签，用浏览器插件去监听这个标签是否出现，该如何去监听呢，要监听的完整代码

var int = self.setInterval("clock()", 1000);
function clock() {
    if (document.getElementById("m3u8loading")) {
        //当断当前元素已存在，停止继续监听
        int = window.clearInterval(int);
        alert("当前元素已存在!");
    }
}

直接定义一个网页数据对象，然后判断这个对象的id值是否为m3u8loading即可。如果有打印处理一下，如果没有打印处理一下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 模拟生成标签
    setTimeout(function() {
      var div = document.createElement('div')
      div.setAttribute('id', 'm3u8loading')
      div.innerHTML = '123'
      document.body.appendChild(div)
    }, 2000)

    // 定时监听
    var timer = setInterval(function() {
      if (document.getElementById("m3u8loading")) {
        alert('标签已生成')
        clearInterval(timer) // 清除定时监听
      }
    }, 100);
  </script>
</body>
</html>

可以定义一个计时器，使用计时器实时监听这个标签是否存在

就是获取网页节点，看看这个节点存在不存在即可！
楼上说的方法都可以，有问题来交流

直接页面打日志就可以

楼上的几种方法应该集合一下，~~毕竟MutationObserver兼容性并不好~~ （其实还好）（@打工很辛苦吧）
setInterval+MutationObserver=solve。
方法楼上都给了，自己看吧。（我没写一行代码，采纳了也给楼下多打赏一点）

直接在那个节点下进行判断即可

代码执行后在页面生成一个 id = 'm3u8loading' 的标签，首先定位到那个标签，提取标签内容，然后写判断逻辑。

[https://www.cnblogs.com/jffun-blog/p/11255097.html(JS - 监听整个页面上的 DOM 树变化)