JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div data-name="mess-out" class="pkujhhh">
        
</div>

<a class="addElem" href="#">Добавить элемент</a>

CSS

.addElem:hover{
  cursor: pointer;
  text-decoration: none; 
}
.addElem{
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    color: black;
}
#mess > ul > p{
  font: 60px sans-serif;
}

JavaScript

$("a.addElem").click(function(){
  function create(htmlStr) {
       var frag = document.createDocumentFragment(),
           temp = document.createElement('div');
       temp.innerHTML = htmlStr;
       while (temp.firstChild) {
           frag.appendChild(temp.firstChild);
       }
      return frag;
   }

   var fragment = create('<div id="mess" class="lkkyggg"> <ul class="khtgedd"><li>                      <p> Hello world </p></li> </ul> </div> ' );
   // You can use native DOM methods to insert the fragment:
   document.body.insertBefore(fragment, document.querySelector('div[data-name="mess-out"]'));        
   $("a.addElem").hide();
});
                  // выбираем нужный элемент для наблюдения
                var target = document.querySelector(".pkujhh >  #mess");
	var observer = new MutationObserver(function(mutations) { 
		mutations.forEach(function(mutation) {
                alert("Сработало!");                                
		});
	});

	var config = { attributes: true, childList: true, characterData: true };

	observer.observe(target, config);