Wie erhalte ich einen Verweis auf das neue DOM-Objekt, nachdem ich den Inhalt mit OuterHTML geändert habe?
Ich habe eine Abteilung, deren äußere HTML ich bei einem Ereignis ändern muss. Das Problem ist, dass beim Einstellen derouterHTML
Ich kann nicht auf das neu ausgewählte DOM-Objekt verweisen, es sei denn, ich fange es erneut explizit ab.
Gibt es eine Möglichkeit, die Variablenreferenz beim Aufrufen von @ direkt zu aktualisiereouterHTML
(in meinem Fall die Referenz desdiv
Variable unten)?
$("#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>