`insertAdjacentHTML`と` createElement`

Question

新しく作成された要素（createElement()）への参照を、DOMの既存の要素の後に挿入したままにするにはどうすればいいですか（insertAdjacentHTML()）？私はinsertAdjacentHTML()後elNew/elNewInnerを使用する場合は、この例では

、あなたは、色が変化しないことがわかります。

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>

をへの参照を保持する方法はあります私がinsertAdjacentHTMLを使用した後の要素か、JavaScriptを使って同じことを達成するための他の方法がありますか？そのよう.outerHTMLで.insertAdjacentHTMLを使用するよりも

Answer 1

より良いアプローチはelOrigの.parentNodeから.insertBeforeを使用することです。

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>

これは事実insertAdjacentHTMLを使用してそれを"afterend"を置くと同じである、elOrigの.nextSibling前elNewを挿入します。

オリジナルのやり方では、新しい要素をHTMLに変換してからHTMLから新しい要素を作成していましたが、確かに遅くなり、最終的にはコピーが追加されます。