`insertAdjacentHTML` und` createElement`

Question

Wie kann ich einen Verweis auf ein neu erzeugtes Element (createElement()) behalten, das ich nach einem vorhandenen Element im DOM eingefügt habe (insertAdjacentHTML())?

In diesem Beispiel können Sie sehen, dass die Farbe nicht ändert, wenn ich elNew/elNewInner verwenden, nachdem insertAdjacentHTML():

var elOrig = document.getElementById('insertAfter'); 
 

 
// Create new element 
 
var elNew = document.createElement('div'), 
 
    elNewInner = document.createElement('div'); 
 

 
elNewInner.textContent = 'I\'m a new element, but I\'m not red'; 
 

 
elNew.appendChild(elNewInner); 
 

 
elOrig.insertAdjacentHTML('afterend', elNew.outerHTML); 
 

 
// This doesn't change the color in the DOM 
 
elNewInner.style.color = 'red';

<div id="insertAfter">Insert new element after me</div>

Gibt es eine Möglichkeit, um eine Referenz zu halten ein Element, nachdem ich insertAdjacentHTML verwende oder gibt es andere Wege in JavaScript, um dasselbe zu erreichen?

Answer 1

besserer Ansatz als die Verwendung von .insertAdjacentHTML mit .outerHTML so sein würde .insertBefore vom .parentNode von elOrig zu verwenden.

var elOrig = document.getElementById('insertAfter'); 
 

 
// Create new element 
 
var elNew = document.createElement('div'), 
 
    elNewInner = document.createElement('div'); 
 

 
elNewInner.textContent = 'I\'m a new element, but I\'m not red'; 
 

 
elNew.appendChild(elNewInner); 
 
elOrig.parentNode.insertBefore(elNew, elOrig.nextSibling) 
 

 
// This doesn't change the color in the DOM 
 
elNewInner.style.color = 'red';

<div id="insertAfter">Insert new element after me</div>

Dies fügt elNew vor dem .nextSibling von elOrig, die sie als Putting "afterend"insertAdjacentHTML mit effektiv ist die gleiche.

Mit Ihrem ursprünglichen Weg, nahmen Sie die neuen Elemente, wandelten es in HTML um dann neue Elemente aus diesem HTML zu machen, das sicherlich langsamer sein wird und schließlich eine Kopie anhängt.