Javascript `insertAdjacentHTML`和`createElement`

如何保留对新创建的元素（

createElement（）

）的引用，该元素是在DOM中的现有元素（

insertAdjacentHTML（）

）之后插入的

在本例中，如果在

insertAdjacentHTML（）之后使用
elNew
/
elNewInner
，您可以看到颜色没有改变：


var elOrig=document.getElementById（'insertAfter'）；
//创建新元素
var elNew=document.createElement（'div'），
elNewInner=document.createElement（'div'）；
elNewInner.textContent='我是新元素，但我不是红色'；
elNew.appendChild（elNewInner）；
elOrig.insertAdjacentHTML（'afterend'，elNew.outerHTML）；
//这不会更改DOM中的颜色
elNewInner.style.color='red'
在我之后插入新元素
比在
中使用
.insertAdjacentHTML
更好的方法。outerHTML
类似于使用
的
.parentNode
中的
.insertBefore


var elOrig=document.getElementById（'insertAfter'）；
//创建新元素
var elNew=document.createElement（'div'），
elNewInner=document.createElement（'div'）；
elNewInner.textContent='我是新元素，但我不是红色'；
elNew.appendChild（elNewInner）；
elOrig.parentNode.insertBefore（elNew、elOrig.nextSibling）
//这不会更改DOM中的颜色
elNewInner.style.color='red'
在我之后插入新元素
这只回答了问题的一半，JavaScript中是否有其他方法可以实现同样的效果？。我很感兴趣的是为什么没有work@Tushar：读最后一句话。这说明了为什么原来的方法不起作用。