Question

我有这行代码：

document.querySelector(".theclass").outerHTML = "The outerHTML";

当页面加载时它会正确触发，但这会导致“无法设置未定义或空引用的属性”错误。据我所知，这可能发生，因为.theclass还没有，因此脚本无法定位它。

是否有一种简单的方法，使用JavaScript简单地为这行代码设置延迟，但是它会像加载页面时那样自动启动？

Answer 1

尝试使用

document.onload=function(){
   document.querySelector(".theclass").outerHTML = "The outerHTML";
};

编辑：对于异步加载，您可以使用jquery

$(document).on('DOMNodeInserted', function(e) {
    if ($(e.target).is('.theclass')) {
       document.querySelector(".theclass").outerHTML = "The outerHTML";
    }
});

Answer 2

一个选项是使用MutationObserver来监听元素添加，当我们添加目标元素时，我们可以更新它并删除观察者

＆＃13;

setTimeout(function() {
  document.getElementById('parentelement').innerHTML = '<span class="theclass">theclass</span>';
}, 500);

// select the target node
var target = document.querySelector('#parentelement');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type, mutation);
    Array.from(mutation.addedNodes).forEach(function(el) {
      if (el.classList.contains('theclass')) {
        el.outerHTML = "The outerHTML";
        observer.disconnect();
      }
    });
  });
});

var config = {
  childList: true
};
observer.observe(target, config);

＆＃13;

<div id="parentelement"></div>

＆＃13;

如何设置延迟

2 个答案: