У меня есть разделение, которое мне нужно, чтобы изменить внешний HTML-код на событие. Проблема в том, что при настройкеouterHTML Я не могу ссылаться на новый выбранный объект DOM, если я не перехватил его явно.

Есть ли способ напрямую обновить ссылку на переменную при вызовеouterHTML (в моем случае ссылка наdiv переменная ниже)

$("#changeDiv").click(function(){

  var div = $(this).prev();
  div[0].outerHTML = `<div id="imSecondtDiv"> <p> World </p> </div>`;
  console.log(div); // logs [div#imFirstDiv, prevObject: n.fn.init[1], context: button#changeDiv]
  
  // the following line does not affect the newly added division 
  // since the var `div` references the old DOM object
  // unless I add div = $(this).prev(); before setting the html of 
  // the paragraph it will not set it
  div.find('p').html('Override'); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imFirstDiv"> <p> Hello </p> </div>
<button id="changeDiv" >Change Div 1</button>