Добавление кнопки в div после загрузки div в dom

Question

Я пытаюсь получить доступ к div (или здесь тегу tr), к которому я хочу добавить кнопку.Но я не могу получить доступ к тегу tr, потому что он загружается через некоторое время и не присутствует в DOM в тот момент, когда появляется ошибка.

как получить доступ к тегу после загрузки чего-либо в DOM

<script>
    var btn = document.getElementById('btnn');
    var tab = document.getElementsByClassName("scope")[0];
    tab.append(btn)
</script>

Answer 1

Я думаю, что ваш код document.getElementById должен выполняться только после загрузки каждого файла.Вы можете добавить «загрузить» Eventlistener и поместить свой код внутри него.

window.addEventListener("load", function(){
    var btn = document.getElementById('btnn');
    var tab = document.getElementsByClassName("scope")[0];
    tab.append(btn)
}); 

Кстати: я всегда использую «defer» для своих включений, например:

<script src="{{ asset('/general/js/local.js') }}" defer></script>

Это гарантирует, что событие «load» будет запущено только после загрузки всех включений.

Answer 2

Вы можете смотреть DOM, используя MutationObserver API.Если добавленный вами элемент добавлен, вы можете применить другой код (например, добавить кнопку).

Базовый пример:

let watchDOM = (function(){
  let mo = window.MutationObserver;

  return function(obj, callback){
    if (!obj || !obj.nodeType === 1) {
		return;
	}		

    if (mo) {
      let obs = new mo(function(mutations, observer) {
          callback(mutations);
      });
      obs.observe(obj, { childList:true, subtree:true });
    }
    
    else if (window.addEventListener){
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

watchDOM(document.body, function(e) {
	// This will notify you if a new DIV is added.
	if (e[0].addedNodes[0].tagName === "DIV") {
  	// If the DIV is added, you can then take some action here.
    // For example, you could append your button here.
  	console.log("div added");
    }
});

// This adds a new DIV after 3 seconds of running the script
setTimeout(function() {
	let newDiv = document.createElement("div");
  document.body.appendChild(newDiv);
}, 3000);

Answer 3

Это DIV создается в ответ на вызов AJAX.Если это так, то вам нужно позвонить вам по логике добавления кнопок, как только будет получен ответ на вызов AJAX.

ИЛИ используйте это:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>